准备事项
npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier prettier stylelint stylelint-scss -D
插件说明
- @typescript-eslint/eslint-plugin @typescript-eslint/parser
目的是用来让 eslint 支持 ts 的检测
- eslint-config-prettier eslint-plugin-prettier
目的是用来糅合 eslint 和 prettier，使之相呼应
主要配置文件
- 创建 .eslintrc.js
const eslintObj = {
extends: ['plugin:jsx-a11y/recommended', 'prettier'],
parser: '@typescript-eslint/parser',
plugins: ['jsx-a11y', '@typescript-eslint', 'prettier'],
rules: {
...
},
});
module.exports = eslintObj;
- 创建 .prettierrc.js
module.exports = {
// 规则
...
});
- 创建 .stylelintrc.js
module.exports = {
plugins: ['stylelint-scss'],
rules: {
'selector-max-id': 1,
'max-line-length': 150,
...
},
};
- 其他文件
- .stylelintignore
- .eslintignore
- .prettierignore
vscode 问题
- 安装插件 eslint prettier-code format
- 如果遇到 eslint 配置但是并没有波浪线提示，检查 .editorconfig 下的 eslint.validate 配置
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue",
"markdown"
],
- 如果 prettier 配置了但是不生效
- 先查看是否读取了 editorconfig 的配置
- 可以指定读取文件尝试 搜 config path
命令
- "stylelint": "stylelint "**/*.{css,scss,less}" --fix",
- husky@1 lint-staged
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,ts,tsx,jsx}": [
"prettier -w",
"eslint --fix",
"git add"
],
"src/**/*.{css,scss,sass}": [
"npm run stylelint",
"git add"
]
}
eslint 规则文档
eslint.bootcss.com/docs/rules/
preiiter 规则 demo
json.schemastore.org/prettierrc
stylelint 规则文档
cloud.tencent.com/developer/s…
