【前端工程化】01_ESLint

2021-02-09 21:57:04 阅读：218 来源： 互联网

标签：01 -- parser module js ESLint 工程化 parserOptions eslint

安装

npm install eslint --save-dev

使用

生成配置文件：

./node_modules/.bin/eslint --init
# 或者
npx eslint --init

以上面生成的文件为校验配置，每次校验时会按照文件进行校验：

./node_modules/.bin/eslint 文件名
# 或者
npx eslint 文件名
# 或者（校验多个以.js为后缀的文件）
npx eslint --ext .js
# 使用script，在package.json的script中新增 lint: npx eslint --ext .js
npm run lint

修复：

./node_modules/.bin/eslint --fix 文件名
# 或者
npx eslint --fix 文件名
# 或者（校验多个以.js为后缀的文件）
npx eslint --fix --ext .js
# 使用script，在package.json的script中新增 lint:fix: npx eslint --fix --ext .js
npm run lint:fix

配置文件

ESLint校验时读取的配置文件：

.eslintrc.js；
.eslintrc.yaml或者.eslintrc.yml；
.eslintrc.json；
package.json中的eslintConfig字段。

还可以设置.eslintignore文件，告诉 ESLint 去忽略特定的文件和目录。

配置项

parserOptions

module.exports = {
  parserOptions: {
    ecmaVersion: 12,                  // 支持的es语法版本号，可以时3-12，也可是年份，如2015
    sourceType: 'module',             // 默认是script, module指ECMAScript 模块
    ecmaFeatures: {                   // 使用额外的语言特性
        globalReturn: true,           // 允许在全局作用域下使用 return 语句
        impliedStrict: true,          // 启用全局 strict mode 
        jsx: true,                    // 启用 JSX 
        experimentalObjectRestSpread: true      // 启用实验阶段的语法
    }
  }
};

parser

module.exports = {
    parserOptions: {},
    parser: "esprima"          // 指定解析器
}

解析器的可选值有：

esprima；
babel-eslint；（现在包名改为@babel/eslint-parser了）
@typescript-eslint/parser；

plugins

ESLint支持使用第三方插件，可以使用npm按照，在配置plugins时，可以省略插件的eslint-plugin-前缀。

module.exports = {
    parserOptions: {},
    parser: "esprima",          
    plugins: [
        "import",              // eslint-plugin-import 支持import语句
        "vue"                  // eslint-plugin-vue 支持vue语句
    ]
}

processor

有些插件会提供处理器。它的作用是：

从包含 js 代码的非 js 文件中，提取出 js 代码，并让 eslint 检查这些 js 代码的规范性；
在预处理过程中，假如需要对 js 代码进行某些转换，可以用处理器。

module.exports = {
    parserOptions: {},
    parser: "esprima",          
    plugins: ["a-plugin"],
    processor: "a-plugin/a-processor"
}

如果想指定文件的话，可以在overrides中配置：

module.exports = {
    parserOptions: {},
    parser: "esprima",          
    plugins: ["a-plugin"],
    overrides: [{
        files: ["*.md"],
        processor: "a-plugin/markdown"
    }, {
        files: ["**/*.md/*.js"],
        rules: {
        	strict: "off"
        }
    }]
}

env

指定代码运行环境。可以定义多个，具体可以配置的选项看 Specifying Environments：

module.exports = {
    env: {
        browser: true,          // 浏览器环境中的全局变量
        es2021: true,           // 启用除了 modules 以外的所有 ECMAScript 2021 特性
        node: true,             // Node.js 全局变量和 Node.js 作用域
    },
    parserOptions: {},
    parser: "esprima",          
    plugins: [],
    processor: []
}

global

当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。 "writable" 以允许重写变量，或 "readonly" 不允许重写变量。

module.exports = {
    env: {},
    parserOptions: {},
    parser: "esprima",          
    plugins: [],
    processor: [],
    globals: {
        "var1": "writable",
        "var2": "readonly"
    }
}

rules

"off" 或 0 - 关闭规则
"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

具体规则查看 rule

module.exports = {
    env: {},
    parserOptions: {},
    parser: "esprima",          
    plugins: [],
    processor: [],
    globals: {
        "var1": "writable",
        "var2": "readonly"
    },
     rules: {
        'no-console': 'off',           // 使用console.log不报错
     },
}

overrides

单独为某些文件设置一些ESLint校验配置项。

module.exports = {
    env: {},
    parserOptions: {},
    parser: "esprima",          
    plugins: [],
    processor: [],
    globals: {},
     rules: {},
     overrids: [{
      	"files": ["*-test.js","*.spec.js"],
      	"rules": {
        	"no-unused-expressions": "off"
      	}
    }]
}

extends

可以指定默认的校验规则，如果使用eslint-config-airbnb-base，需要在extends中配置，可以省略eslint-config-

module.exports = {
    env: {},
    parserOptions: {},
    parser: "esprima",          
    plugins: [],
    processor: [],
    globals: {},
    rules: {},
    overrids: [],
    extends:  [
        'airbnb-base',
    ],
}

注释

单独配置某条语句的校验规则：

/* eslint eqeqeq: "off", curly: "error" */

不校验某些语句

/* eslint-disable */

alert('foo');

/* eslint-enable */

/* eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/* eslint-enable no-alert, no-console */

如果在整个文件范围内禁止规则出现警告，将 /* eslint-disable */ 块注释放在文件顶部

参考

ESLint官网

如有错误，欢迎指出，感谢~

标签：01,--,parser,module,js,ESLint,工程化,parserOptions,eslint
来源： https://blog.csdn.net/qq_34086980/article/details/113776197

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9