背景
统一团队的代码规范,以react项目为例子,举一反三
”eslint“: javascript代码检测工具
"stylelint": css检测工具
"stylelint-config-standard": stylelint的推荐配置
"stylelint-order": css属性排序插件,合理的排序加快页面渲染
"stylelint-scss": 增加支持scss语法
"husky+lint-staged":commit时候代码检查
json{ "devDependencies": { "@babel/core": "^7.14.8", "@babel/plugin-transform-runtime": "^7.14.5", "@babel/preset-env": "^7.14.9", "@babel/preset-react": "^7.14.5", "@babel/preset-typescript": "^7.14.5", "@babel/runtime-corejs3": "^7.14.9", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1", "@types/react-dom": "^17.0.9", "@typescript-eslint/eslint-plugin": "^4.29.1", "@typescript-eslint/parser": "^4.29.1", "babel-loader": "^8.2.2", "cross-env": "^7.0.3", "css-loader": "^6.2.0", "css-minimizer-webpack-plugin": "^3.1.1", "dotenv": "^10.0.0", "dotenv-webpack": "^7.0.3", "eslint": "^7.32.0", "eslint-config-google": "^0.14.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^3.4.0", "eslint-plugin-react": "^7.24.0", "eslint-plugin-react-hooks": "^4.2.0", "html-webpack-plugin": "^5.3.2", "husky": "^7.0.2", "lint-staged": "^11.1.2", "mini-css-extract-plugin": "^2.4.2", "postcss-loader": "^6.2.0", "postcss-preset-env": "^6.7.0", "prettier": "^2.3.2", "react-refresh": "^0.10.0", "sass": "^1.40.1", "sass-loader": "^12.1.0", "style-loader": "^3.2.1", "stylelint": "^13.13.1", "tsconfig-paths-webpack-plugin": "^3.5.1", "typescript": "^4.3.5", "webpack": "^5.48.0", "webpack-cli": "^4.7.2", "webpack-dev-server": "^3.11.2", "webpack-merge": "^5.8.0" } }
添加ESLint
我们使用ESLint
来Linting Code
- 安装所需要的依赖项
bashyarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev
- 在项目根目录下添加
.eslintrc.json
json{ "env": { "browser": true, "es2020": true, "node": true }, "extends": [ "plugin:promise/recommended", "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:@typescript-eslint/recommended", "prettier/@typescript-eslint", "plugin:prettier/recommended" ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 2020, "sourceType": "module" }, "plugins": [ "promise", "react", "@typescript-eslint", "react-hooks", "prettier" ], "rules": { "prettier/prettier": 2, "react-hooks/rules-of-hooks": 2, "react-hooks/exhaustive-deps": 1, "react/display-name": 0, "react/prop-types":0, "@typescript-eslint/no-var-requires": 0 }, "settings": { "react": { "version": "detect" } } }
添加Prettier
bashyarn add prettier eslint-config-prettier eslint-plugin-prettier --dev
在项目根目录下添加.prettierrc
json{ "trailingComma": "all", "tabWidth": 2, "semi": true, "singleQuote": true, "endOfLine": "lf", "printWidth": 100, "bracketSpacing": true, "arrowParens": "always", "useTabs": false, "quoteProps": "as-needed", "jsxSingleQuote": true, "jsxBracketSameLine": false, "requirePragma": false, "insertPragma": false, "proseWrap": "preserve", "htmlWhitespaceSensitivity": "css", "vueIndentScriptAndStyle": false, "embeddedLanguageFormatting": "auto" }
换行符
windows和mac、linux默认的换行符不同,为了方便git版本管理,我们需要统一换行符,在项目根目录添加gitignore文件
配置详解
eol (end of line)
#.gitignore
text eol=lf
*.jpg binary
*.png binary
*.gif binary
*.svg binary
已有项目更新换行符
git rm --cached -r .
git reset --hard
参考链接