研究了一天，项目集成，编辑器集成，eslint和prettier，看起来有4种情况，我接触的大多都只有eslint的配置文件。
现实是eslint及负责语法又负责风格（ 负责js代码），prettier支持很多语言，所以最好的解决办法就是【eslint负责语法问题，prettier负责代码风格问题】
一、ESlint
1、安装
yarn add eslint --save
2、结合项目
// 初始化.eslintrc.js文件
yarn eslint --init
// 校验
yarn eslint src/*
配置文件配置项
1.env
全局环境变量
2.extends
指定配置的字符串(配置文件的路径、可共享配置的名称、eslint:recommended 或 eslint:all)
3.global
配置全局变量的权限，读写，只读...
4.parserOptions
配置想要支持的js语言选项
ecmaVersion，默认是3.5
{ "parserOptions": { "ecmaVersion": 6 } } 只支持语法 { "env":{ "es6": true } } 支持语法和变量
配置项看文档就可以了，你们可以的
5.rules 配置规则
- "off" 或 0 - 关闭规则
- "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
- "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
- 规则级别是第一个，其他配置项放后面
3、结合webpack
eslint-loader弃用了 使用plugin: eslint-webpack-plugin 在dev或者prod模式都使用
new ESLintPlugin({
// Plugin options
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
context: paths.appSrc,
}),
4、结合vscode
安装eslint插件 在setting.json配置,其他在插件里都有默认值，可以不用写
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
5、行内注释配置
- 某一特定的行上禁用所有规则
// eslint-disable-line
- 某一特定的行上禁用某个指定的规则
// eslint-disable-line no-alert
- 某个特定的行上禁用多个规则
// eslint-disable-line no-alert, quotes, semi
- 注可以在代码上一行，在代码后面,可以是单行注释//,也可以是多行注释/* */
二、stylelint
跟eslint不同，没有eslint那么健全，没有初始化命令
1、安装
npm install --save-dev stylelint stylelint-config-standard
2、创建.stylelintrc.js
module.exports = {
extends: "stylelint-config-standard"
}
3、结合vscode
其他配置在插件里都有默认值，可以不用写
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
},
4、结合webpack
// 命令行
npm install stylelint-webpack-plugin --save-dev
// webpack配置文件
const StylelintPlugin = require('stylelint-webpack-plugin');
module.exports = {
// ...
plugins: [new StylelintPlugin(options)],
// ...
};
三、Prettier
1、安装
vscode 左边有 4 个不规则的小块，点进去，搜 prettier，安装 Prettier - Code Formatter
2、结合vscode（有的项目可能没有做 prettier 的配置项，我们可以自己约束自己）
左边齿轮 - settings - edit in setting.json
// 设置所有语言的默认格式化器
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 指定js的默认格式化器,也可以指定其他语言的默认格式化器
"[javascript]":{
"editor.defaultFormatter": "esbenp.prettier-vscode",
}
"editor.formatOnSave":true
3、结合项目
- 项目内安装
npm install --save-dev --save-exact prettier
- 增加.prettierrc.json 文件，作为格式化时 prettier fix 的依据
{
"semi": true
}
- 增加.prettierignore 文件，作为格式化时 prettier 忽略文件的配置项
# Ignore artifacts:
build
coverage
dist
- 执行命令，fix
yarn prettier --write .
// 或者
npx prettier --write .
4、结合webpack
prettier-webpack-plugin
// 命令行
npm install --save-dev prettier prettier-webpack-plugin
// webpack配置文件
var PrettierPlugin = require("prettier-webpack-plugin");
module.exports = {
// ... config settings here ...
plugins: [
new PrettierPlugin()
],
};
prettier-webpack-loader是早期版本了，可以看看【github.com/hawkins/pre…
注意
如果设置了与编辑器集成，那么项目内的.prettierignore 文件和.prettierrc.json 就会失效，按照编辑器的配置项格式化
四、配置冲突
场景 1：存在 eslint 觉得不应该有分号，给你报红，你删了，用 prettier 格式化之后，又给加回来了。
场景 2：双引号不符合 eslint,单引号不符合 prettier
eslint-plugin-prettier
- 使用插件 eslint-plugin-prettier，prettier 将会依据 eslint 的规则运行，并将错误报告作为 eslint 的问题报出
- 如果禁用与代码格式相关的所有其他 ESLint 规则，并且仅启用检测潜在错误的规则，则此插件效果最佳，
// 安装
npm install --save-dev eslint-plugin-prettier
// .eslintrc.js配置项
{
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
eslint-config-prettier
此插件就是禁用与代码格式相关的所有其他 ESLint 规则
// 安装
npm install --save-dev eslint-config-prettier
// .eslintrc.js配置项，把plugin:prettier/recommended放后面，别单独用，单独用的话，eslint的语法报警就不生效了。。。血的教训
{
extends: ["standard", "plugin:prettier/recommended"],
}
// 上面的配置与下面的配置相等
{
extends: ["prettier"],
plugins: ["prettier"],
rules: {
"prettier/prettier": "error",
// 强制或禁止在箭头函数体的周围使用大括号。
"arrow-body-style": "off",
// 强制或禁止使用箭头函数作为回调
"prefer-arrow-callback": "off"
}
}
