VsCode开发Vue项目配置保存代码自动Eslint格式化

VsCode开发Vue项目配置保存代码自动Eslint格式化

作者 拓荒 日期 2021-09-13
Vue Eslint

首先安装以下模块

babel-eslint,eslint,eslint-config-prettier,eslint-plugin-prettier,eslint-plugin-vue,prettier

其中prettier相关的模块是可以让eslint使用prettier（格式化代码的工具）的配置规则，安装后package.json会多出如下模块记录

"babel-eslint": "^10.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^7.17.0",
"prettier": "^2.4.0",

项目更目录创建.eslintrc.js文件

内容大致如下：

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es6: true,
  },
  ignorePatterns: ['node_modules', 'dist', 'test'],
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  globals: {
    eventBus: 'readonly',
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  plugins: ['vue'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
}

配置属性解释

  1. root意思是当前目录既是此配置有效目录，其规则不会作用域当前目录的上层目录；env 是指定规则所处的环境可以允许其全局变量（参考）；

  2. ignorePatterns是需要忽略eslint作用的目录；

  3. globals生名全局变量，避免某个全局变量eslint会报错或警告；
  4. parserOptions；
  5. extends可配置eslint的拓展，多个拓展使用数组，其中eslint:recommended是启用一系列核心规则，其规则便是下面的rules属性；plugin:vue/essential 是使用插件对应的规则，如果是vue3项目建议用plugin:vue/vue3-recommended替代，'@vue/prettier'是使用额外的配置文件；
  6. plugins是要使用的插件；
  7. rules是定义的检测规则

配置VsCode

打开VsCode配置文件设置"eslint.run": "onSave",

FEATURED TAGS
Vue Eslint