小洛的前端技术博客

Appearance

工程化项目需要安装的模块 ​

Eslint：代码规范

prettier：代码格式化

commitlint：规范代码提交信息

husky：自动化代码检查和格式化

lint-staged：提交代码前自动运行lint和格式化

editorconfig：编辑器配置

stylelint：检查CSS代码风格

eslint和prettier ​

vue3项目->eslint-plugin-vue

sh
npm install eslint eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier prettier --save-dev
npm install eslint eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier prettier --save-dev

若有typescript

sh
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

.eslintrc.js

js
parserOptions: {
  parser: '@typescript-eslint/parser',
},
extends: [
  'eslint:recommended',
  'plugin:@typescript-eslint/recommended',
  'plugin:prettier/recommended',
],
parserOptions: {
  parser: '@typescript-eslint/parser',
},
extends: [
  'eslint:recommended',
  'plugin:@typescript-eslint/recommended',
  'plugin:prettier/recommended',
],

配置eslint ​

.eslintrc.js

js
module.exports = {
  root: true,
  env: {
    node: true,
    es6: true,
    browser: true,
  },
  parser: 'vue-eslint-parser', // 解析 Vue 单文件组件
  parserOptions: {
    ecmaVersion: 2020, // 支持最新的 ECMAScript 特性
    sourceType: 'module', // 使用 ES 模块
  },
  extends: [
    'plugin:vue/vue3-recommended', // Vue3 推荐规则
    'eslint:recommended', // ESLint 推荐规则
    'plugin:prettier/recommended' // 将 Prettier 作为 ESLint 规则集成
  ],
  rules: {
    'prettier/prettier': 'error', // 启用 Prettier 错误提示
    // 可在此添加其他自定义规则
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  }
}
module.exports = {
  root: true,
  env: {
    node: true,
    es6: true,
    browser: true,
  },
  parser: 'vue-eslint-parser', // 解析 Vue 单文件组件
  parserOptions: {
    ecmaVersion: 2020, // 支持最新的 ECMAScript 特性
    sourceType: 'module', // 使用 ES 模块
  },
  extends: [
    'plugin:vue/vue3-recommended', // Vue3 推荐规则
    'eslint:recommended', // ESLint 推荐规则
    'plugin:prettier/recommended' // 将 Prettier 作为 ESLint 规则集成
  ],
  rules: {
    'prettier/prettier': 'error', // 启用 Prettier 错误提示
    // 可在此添加其他自定义规则
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  }
}

配置prettier ​

.prettierrc

json
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2,
  "endOfLine": "auto"
}
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2,
  "endOfLine": "auto"
}

配置Package.json文件 ​

json
{
  "scripts": {
    "lint": "eslint . --ext .js .jsx,.vue",
    "lint:fix": "eslint . --ext .js .jsx,.vue --fix",
    "format": "prettier --write ."
  }
}
{
  "scripts": {
    "lint": "eslint . --ext .js .jsx,.vue",
    "lint:fix": "eslint . --ext .js .jsx,.vue --fix",
    "format": "prettier --write ."
  }
}

编辑器自动格式化 ​

.vscode/settings.json

json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

忽略文件 ​

.eslintignore

json
node_modules/
dist/
node_modules/
dist/

.prettierignore

json
node_modules/
dist/
node_modules/
dist/

commitlint和husky ​

sh
npm install husky @commitlint/cli @commitlint/config-conventional --save-dev
npm install husky @commitlint/cli @commitlint/config-conventional --save-dev

配置 Commitlint ​

.commitlintrc.js

js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',    // 新功能
        'fix',     // Bug 修复
        'docs',    // 文档更新
        'style',   // 代码样式调整（空格、分号等）
        'refactor',// 代码重构（非功能或修复）
        'test',    // 测试相关
        'chore',   // 构建或工具链更新
        'revert'   // 回滚提交
      ]
    ],
    'subject-case': [0] // 允许任意提交信息大小写
  }
}
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',    // 新功能
        'fix',     // Bug 修复
        'docs',    // 文档更新
        'style',   // 代码样式调整（空格、分号等）
        'refactor',// 代码重构（非功能或修复）
        'test',    // 测试相关
        'chore',   // 构建或工具链更新
        'revert'   // 回滚提交
      ]
    ],
    'subject-case': [0] // 允许任意提交信息大小写
  }
}

初始化husky ​

检查代码规范和校验提交信息

sh
npx husky init
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
npx husky add .husky/pre-commit 'npx lint-staged'
npx husky init
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
npx husky add .husky/pre-commit 'npx lint-staged'

husky需要添加在package.json

json
{
  "scripts": {
    "prepare": "husky install"
  }
}
{
  "scripts": {
    "prepare": "husky install"
  }
}

提交前自动检查代码(需要lint-staged) ​

sh
npm install lint-staged --save-dev
npm install lint-staged --save-dev

在package.json添加

json
{
  "lint-staged": {
    "*.{js,jsx,vue}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{css,scss}": [
      "stylelint --fix",
      "prettier --write"
    ],
    "*.{json,md}": [
      "prettier --write"
    ]
  }
}
{
  "lint-staged": {
    "*.{js,jsx,vue}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{css,scss}": [
      "stylelint --fix",
      "prettier --write"
    ],
    "*.{json,md}": [
      "prettier --write"
    ]
  }
}

.husky文件夹完整配置 ​

.husky/commit-msg 文件内容

json
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no -- commitlint --edit "$1"
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no -- commitlint --edit "$1"

.husky/pre-commit 文件内容

json
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

.editorconfig的配置 ​

直接创建.editorconfig文件

sh
# EditorConfig 根配置
root = true

[*] # 适用于所有文件
charset = utf-8 # 文件编码
indent_style = space # 使用空格缩进
indent_size = 2 # 缩进大小为 2 个空格
end_of_line = lf # 换行符使用 LF (推荐)
insert_final_newline = true # 文件末尾自动添加空行
trim_trailing_whitespace = true # 移除行尾空格

# 针对特定文件类型的配置
[*.json] # 适用于 JSON 文件
indent_size = 2

[*.md] # 适用于 Markdown 文件
trim_trailing_whitespace = false # Markdown 文件保留行尾空格（防止换行问题）

[*.{yml,yaml}] # 适用于 YAML 文件
indent_size = 2
# EditorConfig 根配置
root = true

[*] # 适用于所有文件
charset = utf-8 # 文件编码
indent_style = space # 使用空格缩进
indent_size = 2 # 缩进大小为 2 个空格
end_of_line = lf # 换行符使用 LF (推荐)
insert_final_newline = true # 文件末尾自动添加空行
trim_trailing_whitespace = true # 移除行尾空格

# 针对特定文件类型的配置
[*.json] # 适用于 JSON 文件
indent_size = 2

[*.md] # 适用于 Markdown 文件
trim_trailing_whitespace = false # Markdown 文件保留行尾空格（防止换行问题）

[*.{yml,yaml}] # 适用于 YAML 文件
indent_size = 2

stylelint配置 ​

sh
# 基础依赖（必须）
npm install stylelint stylelint-config-standard --save-dev

# 如果项目使用 SCSS（按需安装）
npm install stylelint-config-standard-scss postcss-scss --save-dev

# 支持 Vue 单文件组件中的样式（必须）
npm install postcss-html stylelint-config-recommended-vue --save-dev

# 与 Prettier 兼容（避免规则冲突）
npm install stylelint-config-prettier --save-dev

# 检查 CSS 属性顺序（可选）
npm install stylelint-order --save-dev
# 基础依赖（必须）
npm install stylelint stylelint-config-standard --save-dev

# 如果项目使用 SCSS（按需安装）
npm install stylelint-config-standard-scss postcss-scss --save-dev

# 支持 Vue 单文件组件中的样式（必须）
npm install postcss-html stylelint-config-recommended-vue --save-dev

# 与 Prettier 兼容（避免规则冲突）
npm install stylelint-config-prettier --save-dev

# 检查 CSS 属性顺序（可选）
npm install stylelint-order --save-dev

.stylelintrc.cjs，需要安装sass

js
module.exports = {
  extends: [
    'stylelint-config-standard-scss', // SCSS 标准规则
    'stylelint-config-recommended-vue',
    'stylelint-config-prettier'
  ],
  plugins: ['stylelint-order'],
  rules: {
    'scss/at-rule-no-unknown': [ // 允许自定义 SCSS 指令
      true,
      {
        ignoreAtRules: ['tailwind', 'apply', 'layer']
      }
    ],
    'selector-class-pattern': null
  },
  overrides: [
    {
      files: ['**/*.vue'],
      customSyntax: 'postcss-html'
    },
    {
      files: ['**/*.scss'],
      customSyntax: 'postcss-scss' // 解析 SCSS 文件
    }
  ]
}
module.exports = {
  extends: [
    'stylelint-config-standard-scss', // SCSS 标准规则
    'stylelint-config-recommended-vue',
    'stylelint-config-prettier'
  ],
  plugins: ['stylelint-order'],
  rules: {
    'scss/at-rule-no-unknown': [ // 允许自定义 SCSS 指令
      true,
      {
        ignoreAtRules: ['tailwind', 'apply', 'layer']
      }
    ],
    'selector-class-pattern': null
  },
  overrides: [
    {
      files: ['**/*.vue'],
      customSyntax: 'postcss-html'
    },
    {
      files: ['**/*.scss'],
      customSyntax: 'postcss-scss' // 解析 SCSS 文件
    }
  ]
}

.stylelintignore

json
node_modules/
dist/
public/
*.js
*.jsx
*.ts
*.tsx
*.json
*.md
*.woff
*.ttf
node_modules/
dist/
public/
*.js
*.jsx
*.ts
*.tsx
*.json
*.md
*.woff
*.ttf

package.json

json
"scripts": {
  "lint:css": "stylelint \"**/*.{css,scss,vue}\"",
  "lint:css:fix": "stylelint \"**/*.{css,scss,vue}\" --fix"
},
"lint-staged": {
    "*.{js,vue}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{css,scss,vue}": [
      "stylelint --fix", // 自动修复样式问题
      "prettier --write"
    ]
  }
"scripts": {
  "lint:css": "stylelint \"**/*.{css,scss,vue}\"",
  "lint:css:fix": "stylelint \"**/*.{css,scss,vue}\" --fix"
},
"lint-staged": {
    "*.{js,vue}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{css,scss,vue}": [
      "stylelint --fix", // 自动修复样式问题
      "prettier --write"
    ]
  }

程序员小洛文档

Copyright © 2022-suntemple.cn.All right reserved