eslint配置检查

ESlint可以为项目代码风格检查，统一规范项目成员的代码风格，利于后期维护和协作。
一般脚手架工具已经自动帮我们自动集成了 eslint ，以 vue-cli 为例子,创建项目过程中，可以添加 eslint 配置

vue create project-exm 

安装之后，一般会有一个文件叫做 .eslintrc.js,一般是下面这个样子，在配置文件中，使用 "extends": "eslint:recommended" 来启用推荐的规则，报告一些常见的问题,我们可以在 rules 里配置我们自己的规则

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    // 开启 console
    'no-console': 'off',
    'no-useless-catch': 'off',
    'no-async-promise-executor': 'off',
    'no-unused-vars': 'off',
    // prettier配置
    'prettier/prettier': [
        'error',
        {
            singleQuote: true, //单引号
            tabWidth: 4, // tab是4个空格
            semi: false // 不要分号结尾
        }
    ],
    // "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  }
};

可以参考官方的推荐配置，下图截取了部分例子：

参考 eslint-rule, eslint-config

vue-cli eslint-loader配置

下面的配置是通过 运行 vue inspect 来查看 eslint-loader的配置，正常是只检测 src 的业务代码 ，排除 node_modules目录，从而提高了编译打包速度

{
        enforce: 'pre',
        test: /\.(vue|(j|t)sx?)$/,
        exclude: [
          /node_modules/,
          '/Users/***/Documents/WDH_library/myProject/my-vue-lib/node_modules/@vue/cli-service/lib'
        ],
        use: [
          /* config.module.rule('eslint').use('eslint-loader') */
          {
            loader: '/Users/***/Documents/WDH_library/myProject/my-vue-lib/node_modules/eslint-loader/index.js',
            options: {
              extensions: [
                '.js',
                '.jsx',
                '.vue'
              ],
              cache: true,
              cacheIdentifier: '171111d4',
              emitWarning: false,
              emitError: false,
              eslintPath: '/Users/***/Documents/WDH_library/myProject/my-vue-lib/node_modules/eslint',
              formatter: undefined
            }
          }
        ]
      }

我们可以添加.eslintignore文件，配置不检测的文件

# 根据自己的实际需求进行添加
node_modules/*
vue.config.js
postcss.config.js
build/
babel.config.js

VS Code ESLint extension

vs code 编辑器安装 eslint 插件，可以为编辑器提供根据 eslint配置自动格式化的功能，每次保存的时候，进行格式化，免去了手动格式化的烦恼，舒服了很多。