可组装的 JavaScript 和 JSX 检查工具

ESLint 规则

  • 自定义规则
  • 社区提供规则
    • standard
    • prettier
    • airbnb

VSCode 插件

  1. vetur
1
2
3
4
5
6
Name: Vetur
Id: octref.vetur
Description: Vue tooling for VS Code
Version: 0.33.1
Publisher: Pine Wu
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=octref.vetur
  1. prettier
1
2
3
4
5
6
Name: Prettier - Code formatter
Id: esbenp.prettier-vscode
Description: Code formatter using prettier
Version: 6.4.0
Publisher: Prettier
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

ESLint 配置

  • package.json/eslintOptions
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
	"eslintOptions":{
    root: true,
    env: {
      node: true,
    },
    extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
    parserOptions: {
      parser: 'babel-eslint',
    },
    rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    },
  }
}
  • 项目根目录创建 .eslintrc.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

项目编辑器配置

  • 配置 vscode-settings.json 设置编辑器
  • 通过 .editorconfig 设置编辑器

.editorconfig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

Prettier 配置

在文件根目录下创建.prettierrc, 进行自定义规则设置

1
2
3
4
5
6
7
8
9
10
{
  "singleQuote": true,
  "semi": false,
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "arrowParens": "avoid",
  "endOfLine": "lf",
  "trailingComma": "none",
  "jsxSingleQuote": true
}

脚手架命令

npm run lint 命令，可以一键将项目代码格式化成符合 eslint+prettier 验证规则

1
2
3
4
5
6
7
{
	"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
}