hishion blog

# Vue项目配置ESLint校验

Vue项目配置ESLint校验，并使用prettier进行代码格式化。

# 配置

配置前安装一下依赖，之后在项目根目录下创建对应文件。

npm i eslint babel-eslint eslint-plugin-vue prettier eslint-plugin-prettier @vue/cli-plugin-eslint @vue/eslint-config-prettier -D
// or
yarn add eslint babel-eslint eslint-plugin-vue prettier eslint-plugin-prettier @vue/cli-plugin-eslint @vue/eslint-config-prettier -D
1
2
3

# .editorconfig

基本编辑器编码约定

root = true

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

# md files
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# .prettierrc.js

代码格式化，vscode安装扩展prettier，之后会使用该文件进行格式化。

更多配置参考 Prettier · options (opens new window)

module.exports = {
  tabWidth: 2,
  semi: false,
  singleQuote: true,
  quoteProps: 'as-needed',
  jsxSingleQuote: false,
  trailingComma: 'none',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: 'avoid',
  htmlWhitespaceSensitivity: 'ignore',
  vueIndentScriptAndStyle: false,
  endOfLine: 'lf'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# .eslintrc.js

关键文件，这里主要就是配置eslint规则。

更多配置参考 ESlint · rules (opens new window)

module.exports = {
  root: true,
  globals: {
    process: true
  },
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  plugins: ['babel'],
  rules: {
    'semi': [
      'error',
      'never'
    ],
    'quotes': [
      'error',
      'single',
      {
        'avoidEscape': true,
        'allowTemplateLiterals': true
      }
    ]
 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# .eslintignore

可选配置，忽略校验的文件，一般项目都有一些打包文件、第三方文件等，在这里可以忽略，减少eslint带来的不便。

dist/*
1

# vscode编辑器

"[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
},
// 其他文件不用自动格式化可以单独配置
"[scss]": {
  "editor.defaultFormatter": "michelemelluso.code-beautifier",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": false
  }
},
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 提交校验

一些旧项目，如果一次性格式化，可能会出现未知错误，最好在提交的代码进行格式化，确保存入仓库的代码风格统一。

npm i lint-staged husky -D
# or
yarn add lint-staged husky -D
1
2
3

配置 package.json文件，根据 Vue CLI (opens new window)最新说明，@vue/cli-service会安装yorkie方便指定 Git Hook，且不兼容husky，为此无需安装husky也可。

  "gitHooks": {
    "pre-commit": "lint-staged --allow-empty"
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "vue-cli-service lint"
    ]
  },
1
2
3
4
5
6
7
8

# 最后

这样在保存代码时，编辑器会根据prettier配置格式化代码。

提交的代码如果格式不符合，也会自动格式化并提交。

← scss/less编译 →