Eslint + Prettier使用
安装插件。若已安装插件,直接进入下一步配置
npm i eslint prettier eslint-config-prettier eslint-plugin-prettier -D
配置Eslint
1. 初始化配置文件
npx eslint --init
React需配置,解决React@17组件未手动引入React导致Eslint报错,'React' must be in scope when using JSXeslint(react/react-in-jsx-scope)
module.exports = {
//...
extends: [
//...
'plugin:react/jsx-runtime'
]
}
2. 安装 vscode 插件 eslint
3. 点击vscode “设置”
4. 点击 “打开配置文件 ”
4. 配置保存自动修复,setting.json 中加入如下配置:
{
// ...
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"editor.formatOnSave": false,
}
配置 prettier
1. 若项目根目录下无 .eslintrc.js 文件,则新建 .eslintrc.js 文件。加入如下内容:
module.exports = {
//...
extends: [
//...
'plugin:prettier/recommended'
],
rules: {
'prettier/prettier': 'warn'
}
}
2. 项目根目录新建 .prettierrc.json,内容如下:
{
"printWidth": 100,
"semi": false,
"singleQuote": true,
"trailingComma": "none",
"endOfLine": "auto"
}
至此,Eslint + Prettier 配置完成。
注意:以下内容只适用于 husky 8.x 及以下版本
husky使用
安装插件
npm i husky lint-staged -D
启用Husky
* 注意:如果当前项目未初始化git仓库,需要先执行以下命令初始化git仓库
git init
执行以下命令启用Husky,执行完命令后,项目根路径中会多出一个.husky
的文件夹。
npx husky install
执行以下命令,在.husky文件夹下自动生成pre-commit文件
npx husky add .husky/pre-commit
package.json中加入如下配置
{
"scripts": {
# ...
"lint-staged": "lint-staged"
},
# ...
"lint-staged": {
"*.{js,ts,vue}": [
"eslint --fix"
]
}
}
修改 .husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
- undfined
+ npm run lint-staged
附录:
Husky是什么?
Husky 是一个用于前端开发的 Node.js 工具,它主要用于在 Git 提交钩子(Git Hooks)中运行脚本。Git 提交钩子是在 Git 版本控制系统的特定事件发生时执行的自定义脚本,例如在代码提交前执行一些检查或验证。
Husky 的主要用途是帮助开发团队在代码提交前执行一些预定义的操作,以确保代码的质量和一致性。常见的用例包括:
- 代码风格检查: 在提交代码之前运行 ESLint、Prettier 或其他代码风格检查工具,以确保代码遵循一致的编码风格。
- 单元测试: 在提交前运行单元测试,以确保代码没有破坏现有功能。
- 提交消息验证: 检查提交消息是否符合规范,以便生成清晰的提交日志。
husky工作流程
prettier配置详解
{
printWidth: 100, //单行长度
tabWidth: 2, //缩进长度
useTabs: false, //使用空格代替tab缩进
semi: true, //句末使用分号
singleQuote: true, //使用单引号
quoteProps: 'as-needed', //仅在必需时为对象的key添加引号(as-needed,consistent,preserve)
jsxSingleQuote: true, // jsx中使用单引号
trailingComma: 'none', //多行时尾行逗号是否添加,例如对象的最后一行(es5,none,all)
bracketSpacing: true, //在对象前后添加空格 { foo: bar }
jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
arrowParens: 'always', //单参数箭头函数参数周围使用圆括号(avoid,always)
requirePragma: false, //无需顶部注释即可格式化
insertPragma: false, //在已被preitter格式化的文件顶部加上标注
proseWrap: 'preserve', //(always,snever,preserve)
htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感(css,strict,ignore)
vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
endOfLine: 'lf', //换行符(lf,crlf,cr,auto)
embeddedLanguageFormatting: 'auto' //对引用代码进行格式化(auto,off)
}