1、vscode下载代码格式化插件 beautify eslint prettier
2、设置默认格式化标准 ， vscode 任意文件右键
3、配置prettierrc文件（ 网上搜索或者根据公司要求 配置，
基本上都是啥一行多少个字 前后空格 单引号双引号等问题
4、配置vscode的 格式化settingjson文件 实现 save和type的时候自动格式化
{
"git.autofetch": true,
"code-runner.runInTerminal": true,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"[javascriptreact]": {
// "editor.defaultFormatter": "esbenp.prettier-vscode"
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.tabSize": 2,
}
如此一套下来 保存文件的时候会根据配置文件自动格式化文件
5、配置pre-commit 的代码格式校验
npm i -D eslint
eslint --init 生成elintrc文件
配置eslintrc 文件 代码错误检查用eslint 风格用prettier
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["plugin:prettier/recommended"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["react", "@typescript-eslint"],
"rules": {
"prettier/prettier": "error"
}
}
配置 packagejson文件
"lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier",
"lint:prettier": "prettier --check \"**/*\" --end-of-line auto",
"lint-staged": "lint-staged",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
"lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
"lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
"lint:style": "eslint --fix \"src/**/*.less\" --syntax less"