在开发过程中，我们可以通过eslint、stylelint以及prettier来规范代码,保证代码的一致性和避免错误
https://github.com/m-alfred/webpack5
https://github.com/m-alfred/webpack5/blob/master/.eslintrc.js
npm install eslint --save-dev
我们可以通过.eslintrc.* 和 package.json 文件进行eslint规则配置。ESLint 将自动在要检测的文件目录里寻找它们，紧接着是父级目录，一直到文件系统的根目录（除非指定 root: true）。通过这个设定，我们可以对一个项目的不同目录配置不同规则。
ESLint 支持的文件格式和优先级：
{
"extends": "eslint:recommended"
}
使用该配置将默认开启所有在规则页面被标记为 “√” 的规则。
另外，你可以在 npmjs.com 搜索 “eslint-config” 使用别人创建好的配置。
目前使用较多的是eslint-config-airbnb
只有在你的配置文件中扩展了一个共享的配置或者明确开启一个规则，ESLint 才会去校验你的代码。
解析器选项可以在 .eslintrc.* 文件使用 parserOptions 属性设置。可用的选项有：
请注意，支持 ES6 语法并不意味着同时支持新的 ES6 全局变量或类型（比如 Set 等新类型）。对于 ES6 语法，使用 { "parserOptions": { "ecmaVersion": 6 } }；对于新的 ES6 全局变量，使用 { "env":{ "es6": true } }. { "env": { "es6": true } } 自动启用es6语法，但 { "parserOptions": { "ecmaVersion": 6 } } 不自动启用es6全局变量。
.eslintrc 文件 parser 选项
ESLint 默认使用Espree作为其解析器，你可以在配置文件中指定一个不同的解析器，只要该解析器符合下列要求:
以下解析器与 ESLint 兼容：
注意，在使用自定义解析器时，为了让 ESLint 在处理非 ECMAScript 5 特性时正常工作，配置属性 parserOptions 仍然是必须的。解析器会被传入 parserOptions，但是不一定会使用它们来决定功能特性的开关。
一个环境定义了一组预定义的全局变量。 我们可以通过增加以下配置，引入node和browser环境的全局变量
env: {
// 浏览器环境中的全局变量。
browser: true,
// Node.js 全局变量和 Node.js 作用域。
node: true,
},
可用的环境包括：
当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。
对于每个全局变量键配置，可以配置以下值：
globals: {
window: true,
document: true,
XMLHttpRequest: true,
fetch: true,
// 允许重新赋值
var1: 'writable',
// 不允许重新赋值
var2: 'readonly',
// 表示var3不可用作全局变量
var3: 'off'
},
};
ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。在配置文件里配置插件时，可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。
// 引入eslint-plugin-react插件
plugins: ['react'],
ESLint 附带有大量的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：
这三个错误级别可以允许你细粒度的控制 ESLint 是如何应用规则（更多关于配置选项和细节的问题，请查看配置文件）
规则值也可以是数组，数组第一个值表示错误级别
rules: {
// eslint-config-airbnb默认警告console
// 我们可以设置off将其关闭
'no-console': 'off',
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
注意：当指定来自插件的规则时，确保删除 eslint-plugin- 前缀。ESLint 在内部只使用没有前缀的名称去定位规则。
rules: {
// 不要使用eslint-plugin-react/prop-types做id，必须省略前缀
'react/prop-types': 'off',
}
若要禁用一组文件的配置文件中的规则，请使用 overrides 和 files。例如:
overrides: [
{
// 覆盖上面定义的规则，针对测试用例文件不做eslint校验
files: ['*.test.js'],
rules: {
'no-unused-vars': 'off',
},
},
],
上面配置将通过.test.js文件中未定义变量的eslint校验
ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找eslint配置。
{
root: true
}
一个配置文件可以被基础配置中的已启用的规则继承。
extends 属性值可以是：
ESLint递归地扩展配置，因此基本配置也可以具有 extends 属性。extends 属性中的相对路径和可共享配置名从配置文件中出现的位置解析。
rules 属性的覆盖规则：
"eqeqeq": ["error", "allow-null"]"eqeqeq": "warn""eqeqeq": ["warn", "allow-null"]"quotes": ["error", "single", "avoid-escape"]"quotes": ["error", "single"]"quotes": ["error", "single"]在项目根目录创建一个.eslintignore,可以告诉 ESLint 去忽略特定的文件和目录。
.eslintignore 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。例如，以下将忽略所有的 JavaScript 文件：
**/*.js
Globs 匹配使用 node-ignore，所以大量可用的特性有：
除了 .eslintignore 文件中的模式，ESLint总是忽略 /node_modules/* 和 /bower_components/* 中的文件。
例如：把下面 .eslintignore 文件放到当前工作目录里，将忽略项目根目录下的 node_modules，bower_components 以及 build/ 目录下除了 build/index.js 的所有文件。
# /node_modules/* and /bower_components/* in the project root are ignored by default
# Ignore built files except build/index.js
build/*
!build/index.js
格式：
eslint [options] [file|dir|glob]*
这个选项允许你指定 ESLint 在指定的目录下查找 JavaScript 文件时要使用的文件扩展名。注意：默认情况下，它使用 .js 作为唯一性文件扩展名。如果要检测ts、tsx文件。需要显示指定--ext
eslint --fix --ext .js,.jsx,.tx,.tsx src/
上面命令将检测并自动修复src目录下所有.js,.jsx,.tx,.tsx文件
vscode扩展中搜索@id:dbaeumer.vscode-eslint，安装并启用。
vscode配置文件中新增，保存时自动修复eslint错误
//是否开启vscode的eslint
"eslint.enable": true,
// 开启debug
"eslint.debug": true,
// 指定要检查的扩展名文件
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
],
// 保存时自动修复
"editor.codeActionsOnSave": {
"source.fixAll": true,
// 有时候source.fixAll不起作用
"source.fixAll.eslint": true,
},
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[vue]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
针对ESLint extension version >= 2.x
"[html]": {
"editor.codeActionsOnSave": {
"source.fixAll.eslint": false
}
}
// for JavaScript
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
// For TypeScript
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
yarn add --dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
// .eslintrc.js
config.parser = '@typescript-eslint/parser'; // 定义ESLint的解析器
config.extends = ['plugin:@typescript-eslint/recommended']; // 定义文件继承的子规范
config.plugins = ['@typescript-eslint']; // 定义了该eslint文件所依赖的插件
在ts项目中必须执行解析器为@typescript-eslint/parser，才能正确的检测和规范TS代码
interface ParserOptions {
ecmaFeatures?: {
jsx?: boolean;
globalReturn?: boolean;
};
ecmaVersion?: number;
jsxPragma?: string;
jsxFragmentName?: string | null;
lib?: string[];
project?: string | string[];
projectFolderIgnoreList?: string[];
tsconfigRootDir?: string;
extraFileExtensions?: string[];
warnOnUnsupportedTypeScriptVersion?: boolean;
}
parserOptions.project则不需要设置它。parserOptions.project则不需要设置它。['es2018'], 有关有效选项，请参见TypeScript编译器选项。指定可用的Typescript库。如果提供了parserOptions.project则不需要设置它。undefined，此选项使您可以提供项目tsconfig.json的路径。如果未设置tsconfigRootDir，相对路径即相对当前工作目录。如果打算从项目根目录以外的目录运行ESLint，则应考虑使用tsconfigRootDir。prettier中文的意思是漂亮的、美丽的，它是一个代码格式化工具，可以帮助我们统一代码风格，保证代码的可读性
yarn add --dev prettier
使用prettier命令运行prettier:
prettier [options] [file/dir/glob ...]
$ prettier --check prettier.lab.js
Checking formatting...
[warn] prettier.lab.js
[warn] Code style issues found in the above file(s). Forgot to run Prettier?
error Command failed with exit code 1.
支持以下方式配置prettier规则
package.json中增加prettier属性module.exports导出配置对象JS:
// prettier.config.js or .prettierrc.js
module.exports = {
trailingComma: "es5",
tabWidth: 4,
semi: false,
singleQuote: true,
};
https://prettier.io/docs/en/options.html
要忽略指定文件或者目录可以使用.prettierignore。
语法同.eslintignore
# Ignore artifacts:
build
coverage
# Ignore all HTML files:
*.html
或者通过js注释，忽略指定代码片段
// prettier-ignore
matrix(
1, 0, 0,
0, 1, 0,
0, 0, 1
)
eslint-plugin-prettier插件将Prettier作为ESLint规则运行，并将差异报告为单个ESLint问题。
安装eslint插件
yarn add --dev eslint-plugin-prettier
然后在eslint配置中添加：
{
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
如果禁用所有其他与代码格式有关的ESLint规则，并且仅启用检测潜在错误的规则，则此插件运行效果最好。 （如果另一个激活的ESLint规则在如何格式化代码方面与prettier的表现不一致，那么就不可能避免出现lint错误。）我们可以使用eslint-config-prettier禁用所有与格式化相关的ESLint规则。
通过plugin：prettier/recommended可一次性设置该插件和eslint-config-prettier。
yarn add --dev eslint-config-prettier
plugin:prettier/recommended作为最后一个扩展添加到eslint配置文件中{
"extends": ["plugin:prettier/recommended"]
}
{
"extends": [
"plugin:prettier/recommended",
"prettier/flowtype",
"prettier/react"
]
}
plugin:prettier/recommended展开后，实际上就是以下配置：
{
"extends": ["prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error",
// fix arrow-body-style and prefer-arrow-callback issue
"arrow-body-style": "off",
"prefer-arrow-callback": "off"
}
}
prettier.config.js:
// 规范项目代码书写
module.exports = {
// 使用单引号
singleQuote: true,
// 结尾分号
semi: true,
// Specify the number of spaces per indentation-level.
tabWidth: 2,
// Print trailing commas wherever possible when multi-line. (A single-line array, for example, never gets trailing commas.)
trailingComma: 'es5',
// Specify the line length that the printer will wrap on.
// printWidth: 100,
// Use single quotes instead of double quotes in JSX.
jsxSingleQuote: true,
// Print spaces between brackets in object literals.
bracketSpacing: true,
// Include parentheses around a sole arrow function parameter.
/**
* Valid options:
"avoid" - Omit parens when possible. Example: x => x
"always" - Always include parens. Example: (x) => x
*/
arrowParens: 'always',
// Format only a segment of a file.
rangeStart: 0,
rangeEnd: Infinity,
// Prettier can restrict itself to only format files that contain a special comment, called a pragma, at the top of the file. This is very useful when gradually transitioning large, unformatted codebases to prettier.
requirePragma: false,
// Prettier can insert a special @format marker at the top of files specifying that the file has been formatted with prettier. This works well when used in tandem with the --require-pragma option. If there is already a docblock at the top of the file then this option will add a newline to it with the @format marker.
insertPragma: false,
proseWrap: 'never',
// Specify the global whitespace sensitivity for HTML files
htmlWhitespaceSensitivity: 'css',
// For historical reasons, there exist two commonly used flavors of line endings in text files. That is \n (or LF for Line Feed) and \r\n (or CRLF for Carriage Return + Line Feed).
endOfLine: 'auto',
};
配置规则语法错误导致eslint无法正常运行
当parserOptions.project被提供时，当前文件未被包含在tsconfig.json的include中就会出现上述错误。
可以通过以下两种方法解决https://www.npmjs.com/package/@typescript-eslint/parser:
parserOptions.createDefaultProgram = true;parserOptions.project被指定并且createDefaultProgram为false时，你必须只校验tsconfig.json文件中指定的哪些文件。如果你已存在的tsconfig配置不包含所有你想要校验的文件时，你可以创建一个独立的tsconfig.eslint.json，设置parserOptions.project为该文件，来移除报错的文件：{
// extend your base config so you don't have to redefine your compilerOptions
"extends": "./tsconfig.json",
"include": [
"src/**/*.ts",
"test/**/*.ts",
"typings/**/*.ts",
// etc
// if you have a mixed JS/TS codebase, don't forget to include your JS files
"src/**/*.js"
]
}
https://github.com/typescript-eslint/typescript-eslint/issues/2540
运行eslint -v发现版本号和自己希望的不同，原因是包管理器自动安装了依赖中的eslint某个版本
解决：
当前项目package.json中指定eslint版本