ESLint 规范

ESLint 规范

安装

npm install @zhiq1/mclint-eslint -D
# OR
yarn add @zhiq1/mclint-eslint --dev

使用

在你的工程根目录下创建一个.eslintrc.js配置文件

配置如下:

• vue

module.exports = {
  extends: ['selling/vue'],
}

:::caution 如果项目之前安装过 ESLint 相关的包，建议卸载，避免引入不必要的包。如eslint、eslint-plugin-vue、@babel/eslint-parser、@typescript-eslint/eslint-plugin 、@typescript-eslint/parser、@vue/eslint-config-standard、@vue/eslint-config-typescript、eslint-config-react-app、 eslint-plugin-import等，直接在 package.json 搜索eslint，相关的包全部卸载 :::

规范

见ESLint 规范

eslint 配置文件解析

// eslint-disabled-line: 在特定行禁用
// eslint-disabled-next-lint: 在下一行禁用
module.exports = {
  /**
   * 根目录标识
   * 当前配置文件为最底层的文件，无需往更上一级的文件目录中进行搜索
   * 默认eslint的配置文件搜索方式是从目标文件夹进行搜索，遍历内部每一个文件夹，找到配置文件并层叠使用。再跳出本项目，往祖先文件夹遍历。越近的优先级越高
   * */
  root: true,
  /**
   * 解析器
   * eslint默认使用espree作为解析器
   * 解析器必须是本地安装的一个npm模块。
   * 解析器用于解析js代码，大致有以下几个
   *  Espree：默认解析器
   *  Esprima：js标准解析器
   *  Babel-Eslint：对babel解析器的包装。如果代码需要经过babel转化，则对应使用这个
   *  typescript-eslint-parser：把ts转换为EsTree兼容格式的解析器
   * 通常在vue中不会写在parser中，而是在parserOptions字段
   */
  parser: 'babel-eslint',
  parserOptions: {
    /**
     * 官方说明中，parserOptions的配置参数不包括parser,这里写parser是eslint-plugin-vue的要求，是eslint-plugin-vue的自定义参数
     * eslint-plugin-vue插件依赖vue-eslint-parser解析器，vue-eslint-parser解析器，直解析.vue中html部分的内容，不会检测script中的js
     * 由于解析器只有一个，用了vue-eslint-parser就不能用babel-eslint。所以vue-eslint-parser的做法是，在解析器选项中，在传入一个解析器选项parser。在内部处理babel-eslint，检测script标签中的js代码
     */
    parser: 'babel-eslint',
    /**
     * 运行环境
     * browser / node / es6 / amd / commonjs / jquery / mongo / worker / serviceworker
     */
    env: {
      browser: true,
      node: true,
    },
    /**
     * 全局变量
     * 开发者定义额外的全局变量，跳过no-undef规则
     * key是变量名，key的value标识改变量能否被修改
     */
    globals: {
      xxx: true, // true标识xxx可以被修改
    },
    /**
     * 插件
     * 插件同样需要在node_modules中安装
     * 插件名忽略了eslint-plugin-前缀，在package.json中，对应的依赖时eslint-plugin-vue
     * 插件的作用类似于解析器，用于扩展解析器的功能，用于检测非常规的js代码。也可能会新增一些特定的规则
     * 如eslint-plugin-vue帮我们检测.vue文件中的template和script中的js代码
     */
  },
}