Prettier与ESLint:代码风格与质量的自动化保证
Prettier 和 ESLint 是两个互补的工具,它们共同确保代码的风格一致性和质量。Prettier 负责格式化代码,而 ESLint 则执行更复杂的静态分析和规则检查。
Prettier
作用:
自动化代码格式化,确保代码的缩进、括号、引号、换行等样式一致。
不需要配置太多的规则,因为Prettier有一套默认的代码风格。
支持多种编程语言,包括JavaScript、TypeScript、CSS、HTML等。
可以与ESLint集成,避免两者规则冲突。
使用示例: 在项目根目录下创建 .prettierrc
或 .prettierrc.json
文件来配置Prettier,例如:
{
"printWidth": 80, // 行宽
"tabWidth": 2, // Tab宽度
"useTabs": false, // 是否使用制表符
"semi": true, // 是否使用分号
"singleQuote": true, // 使用单引号
"trailingComma": "all", // 尾随逗号
"bracketSpacing": true, // 对象花括号之间是否有空格
"jsxBracketSameLine": false // JSX标签闭合花括号是否在同一行
}
然后在项目中安装Prettier:
npm install --save-dev prettier
并在.gitignore文件中排除Prettier生成的临时文件。
ESLint
#### 作用:
- 静态代码分析,检测潜在的错误、代码异味和不推荐的编程习惯。
- 提供丰富的自定义规则,可以检查代码风格、变量使用、代码复杂度等。
- 可以与Prettier集成,先格式化再检查,避免格式问题干扰实际的错误检测。
使用示例: 创建 .eslintrc.js
或 .eslintrc.yaml
配置文件:
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:react/recommended',
'airbnb-base',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
plugins: [
'@typescript-eslint',
'react',
],
rules: {
'no-console': 'off', // 关闭禁止console.log的规则
'import/no-unresolved': 'error', // 报告未解析的导入
},
};
安装ESLint及其相关的插件:
npm install --save-dev eslint eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin
在项目中使用npx eslint
或配置IDE(如VSCode)的ESLint插件来进行实时检查。
集成与自动化
通过eslint-plugin-prettier和eslint-config-prettier,可以在ESLint中集成Prettier:
npm install --save-dev eslint-plugin-prettier eslint-config-prettier
然后在.eslintrc.js
中添加以下内容:
module.exports = {
// ...
plugins: ['prettier'],
extends: ['plugin:prettier/recommended'], // 使用Prettier的ESLint规则
rules: {
'prettier/prettier': 'error', // 把Prettier的规则设为错误级别
// ...其他规则
},
};
现在,当运行eslint --fix
时,ESLint会先应用Prettier的格式化,然后再执行自己的检查。
样例配置文件
.prettierrc (Prettier配置)
{
"semi": true,
"trailingComma": "none",
"tabWidth": 2,
"singleQuote": true,
"printWidth": 120,
"jsxSingleQuote": true,
"arrowParens": "avoid",
"htmlWhitespaceSensitivity": "css",
"endOfLine": "lf"
}
1.2 .eslintrc.js (ESLint配置)
javascript
module.exports = {
env: {
browser: true,
es6: true,
},
extends: [
'airbnb-base',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
},
plugins: ['@typescript-eslint', 'prettier'],
rules: {
'prettier/prettier': 'error',
'no-unused-vars': 'warn',
'no-console': 'warn',
},
};
集成到构建流程
使用husky和lint-staged进行提交前的检查
安装依赖:
npm install --save-dev husky lint-staged
在package.json
中添加如下配置:
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.ts?(x)": ["prettier --write", "eslint --fix"],
"*.js?(x)": ["prettier --write", "eslint --fix"],
"*.html": ["prettier --write"],
"*.css": ["prettier --write"]
}
这样,在每次提交前,lint-staged会自动运行Prettier和ESLint,格式化和修复代码。
配置IDE
在Visual Studio Code、WebStorm或其他支持ESLint和Prettier的IDE中,安装对应的插件并配置自动格式化和检查。
自定义规则
ESLint的灵活性允许你创建自定义规则以满足特定项目需求。在.eslintrc.js中添加自定义规则:
rules: {
'your-custom-rule': 'error',
// ...
}
创建一个lib或rules目录,然后在其中定义你的自定义规则模块。
常见问题与解决方案
冲突处理
有时,Prettier和ESLint的规则可能会冲突。在这种情况下,通常优先遵循Prettier的规则,因为它专注于代码格式。如果你需要特定的ESLint规则,可以在.eslintrc.js中禁用Prettier的对应规则:
rules: {
'prettier/prettier': ['error', { singleQuote: false }] // 禁用Prettier的单引号规则
}
性能优化
如果ESLint运行缓慢,可以考虑以下优化:
仅在必要时运行:例如,只在修改了相关文件后运行。
使用–cache选项:ESLint将缓存已检查的文件,以加快后续运行速度。
使用.eslintignore文件:排除不需要检查的文件和目录。
使用ESLint的插件和共享配置
插件
@typescript-eslint
:为TypeScript提供额外的规则和错误修复。
eslint-plugin-import
:检查导入顺序和导出规范。
eslint-plugin-react
:针对React组件的特定规则。
eslint-plugin-react-hooks
:检查React Hooks的使用。
eslint-plugin-prettier:使ESLint与Prettier协同工作,防止冲突。
安装这些插件:
npm install --save-dev eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin
共享配置
eslint-config-airbnb
:Airbnb的编码风格指南。eslint-config-prettier
:禁用与Prettier冲突的ESLint规则。
在.eslintrc.js
中使用共享配置:
module.exports = {
extends: [
'airbnb',
'airbnb-typescript',
'plugin:@typescript-eslint/recommended',
'plugin:import/recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:prettier/recommended',
],
// ...
};
定制共享配置
根据项目需求,可以自定义共享配置,例如:
module.exports = {
extends: [
'airbnb',
'airbnb-typescript',
'plugin:@typescript-eslint/recommended',
'plugin:import/recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:prettier/recommended',
],
rules: {
'import/prefer-default-export': 'off', // 关闭非默认导出的警告
'@typescript-eslint/explicit-module-boundary-types': 'off', // 关闭类型声明的警告
// 添加或修改其他规则
},
};
高级用法
配置环境
在.eslintrc.js
中设置环境变量,以便启用特定环境下的规则:
env: {
browser: true,
es6: true,
node: true,
jest: true,
}
使用ESLint的overrides字段
overrides允许你为特定类型的文件或目录指定不同的规则。例如,为.test.js文件添加独立的规则:
module.exports = {
overrides: [
{
files: ['**/*.test.js'],
rules: {
'no-unused-expressions': 'off', // 在测试文件中关闭表达式不使用警告
},
},
],
// ...
};
部署到持续集成(CI)
将ESLint和Prettier集成到持续集成流程中,确保所有提交的代码都符合标准。例如,在GitHub Actions中配置:
name: Lint and Format
on:
push:
branches:
- main
pull_request:
jobs:
lint:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '14.x'
- name: Install dependencies
run: npm ci
- name: Lint and format
run: npm run lint
- 点赞
- 收藏
- 关注作者
评论(0)