本文为 eslint 介绍,其他plugins 可以阅读 webpack 三基础配置:配置plugins
eslint
1. eslint eslint-webpack-plugin
1.1 安装依赖
在 webpack 4 中,ESLint 是通过 loader 的方式集成到 webpack 中的。在 webpack 5 中,是通过 plugins(插件)的形式进行集成。插件名称为 eslint-webpack-plugin。该插件又依赖 eslint 包,故需要安装两个开发依赖包:
css
npm i eslint eslint-webpack-plugin -D
1.2 添加配置文件
在项目的根路径下添加 ESLint 的配置文件:.eslintrc.js
:
js
module.exports = {
env: {
node: true, // 启用node中全局变量
browser: true // 启用浏览器中全局变量
},
// 继承 Eslint 规则
extends: ['eslint:recommended'],
parserOptions: { // 解析选项
ecmaVersion: 6, // ES 语法版本
sourceType: "module", // ES 模块化
ecmaFeatures: { // ES 其他特性
jsx: true // 如果是 React 项目,就需要开启 jsx 语法
}
},
rules: {
'no-var': 'off',
'no-console': 'off'
}
}
1.3 修改 webpack 配置
修改 webpack.config.js
,首先在文件顶部引入插件:
ini
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
Webpack5 插件是通过构造函数方式提供的,引入该插件后,得到的是一个构造函数,通过 new
来创建对象。插件配置在webpack 配置对象的 plugins
节点下,该节点是一个数组,数组每个元素都是一个插件。配置如下:
ini
const ESLintWebpackPlugin = require('eslint-webpack-plugin')
module.exports = {
...
plugins: [
new ESLintWebpackPlugin({
context: path.resolve(__dirname, 'src')
})
],
...
}
2.其他几个eslint 插件及作用
2.1 eslint-plugin-html 插件
通过这个插件你可以让eslint去检测html文件script标签里的js代码。使用示例:
**
less
// .eslintrc.js 文件配置
{
// 和 rules 同级
"plugins": [ "html" ],
// 禁用 eslint-plugin-html 插件 ,或者建 .eslintignore 文件配置 匹配对应文件
"settings": {
"html/html-extensions": [".html", ".vue"]
},
}
2.2 eslint-plugin-import 插件
这个插件意在提供对ES6+ import/export语法的支持,有助于防止你写错文件路径或者引用的变量名。使用示例:
.eslintrc.js 文件配置
ruby
{
"plugins": [
],
"rules": {
"import/no-unresolved": [2, { "commonjs": true, "amd": true }],
"import/named": 2,
"import/namespace": 2,
"import/default": 2,
"import/export": 2, // `"error"` 或 `2`
// # etc...
}
}
其他配置
{
"import/no-unresolved": [2],
"import/named": [2],
"import/default": [2],
"import/namespace": [2],
"import/no-restricted-paths": [0],
"import/no-absolute-path": [2],
"import/no-dynamic-require": [1],
"import/no-internal-modules": [0],
"import/no-webpack-loader-syntax": [1],
"import/export": [2],
"import/no-named-as-default": [0],
"import/no-named-as-default-member": [2],
"import/no-deprecated": [2],
"import/no-extraneous-dependencies": [0],
"import/no-mutable-exports": [0],
"import/nambiguous": [2],
"import/no-commonjs": [1],
"import/no-amd": [1],
"import/no-nodejs-modules": [0],
"import/first": [2],
"import/no-duplicates": [2],
"import/no-namespace": [0],
"import/extensions": [2],
"import/order": [1],
"import/newline-after-import": [2],
"import/prefer-default-export": [0],
"import/max-dependencies": [0],
"import/no-unassigned-import": [0],
"import/no-named-default": [2]
}
rules 里面的配置,则必须为 'off'
、'warn'
或 'error'
。
-
"off"
或0
--- 告诉 ESLint 忽略给定的规则 -
"warn"
或1
--- 告诉 ESLint 将违反给定的行为视为警告(不影响退出代码) -
"error"
或2
--- 告诉 ESLint 在违反给定规则时出错(触发时退出代码为 1)
或者使用现成的推荐规则:
**
json
{
"extends": {
"eslint:recommended",
"plugin:import/errors",
"plugin:import/warnings"
}
}
2.3 eslint-plugin-node 插件
添加对node的eslint支持。使用示例:
**
json
{
"plugins": ["node"],
"extends": ["eslint:recommended", "plugin:node/recommended"],
"rules": {
"node/exports-style": ["error", "module.exports"],
}
}
2.4 eslint-plugin-promise 插件
这个插件意在通过代码风格检测让开发者养成较好地使用promise的方式(最佳实践,best practices)。比如在对promise使用了then之后会要求你加一个catch捕获下异常,当然如果你的方法是直接return返回了这个promise的话则不会要求你马上加catch(因为毕竟当然你可以稍后在其他地方拿到这个promise后再catch)。使用示例
**
json
{
"plugins": [
"promise"
],
"rules": {
"promise/always-return": "error",
"promise/no-return-wrap": "error",
"promise/param-names": "error",
"promise/catch-or-return": "error",
"promise/no-native": "off",
"promise/no-nesting": "warn",
"promise/no-promise-in-callback": "warn",
"promise/no-callback-in-promise": "warn",
"promise/avoid-new": "warn",
"promise/no-return-in-finally": "warn"
}
}
或者直接使用现成的推荐规则:
**
json
{
"extends": [
"plugin:promise/recommended"
]
}
2.5 eslint-plugin-standard 插件
这是一个为Standard Linter而做的补充插件,一共就扩展了4个规则,使用示例如下:
**
css
{
rules: {
'standard/object-curly-even-spacing': [2, "either"]
'standard/array-bracket-even-spacing': [2, "either"],
'standard/computed-property-even-spacing': [2, "even"]
'standard/no-callback-literal': [2, ["cb", "callback"]]
}
}
3. 其他eslint语法解析常用插件:
eslint-plugin-react (支持react 规则) eslint-plugin-vue(支持vue规则)
若是ts项目,还需要配置下面
- @typescript-eslint/parser ESLint 专门解析 TypeScript 的解析器
- @typescript-eslint/eslint-plugin 内置各种解析 TypeScript rules 插件
sql
npm i @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
或
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev
** 配置文件默认为 .eslintrc**
perl
{
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
],
"rules": {
"@typescript-eslint/no-unused-vars": "error"
}
}
谢谢阅读,希望有帮助!
有参考: 链接: juejin.cn/post/729312... www.jianshu.com/p/d0ac0d497...
www.jianshu.com/p/ade75072c...