vscode整合prettier、eslint
- 介绍
- 前提条件
- 过程
- 安装prettier
- 创建.eslintrc.js 配置如下
- 创建.prettierrc文件,配置如下
- 提交时校验
- 安装插件
- 配置
- vscode保存自动格式化
介绍
最近在学习react,通过create-react-app创建项目,发现项目中只整合了eslint,并没有整合prettier,通过一顿摸索及查阅资料,整合成功。特记录下来过程,以备不时之需。
前提条件
- 编辑器
vscode ,并且已经安装好eslint 和prettier 插件 - 使用creat-react-app创建项目
过程
安装prettier
1 2 3 | yarn add eslint-plugin-prettie -dev yarn add eslint-config-prettier -dev yarn add prettier -dev |
创建.eslintrc.js 配置如下
1 2 3 4 5 6 7 | module.exports={ "extends": ["react-app"], "plugins": ["prettier"], "rules": { "prettier/prettier": "error" } } |
创建.prettierrc文件,配置如下
1 2 3 4 | { "singleQuote": false, "semi": true } |
这里我只配置了两个队则,使用单引号,结尾加分号,其他规则自行查阅相关资料
提交时校验
安装插件
1 | yarn add lint-staged husky -dev |
配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | //package.json增加配置 { "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged":{ "src/*.{js,jsx,mjs,ts,tsx}": [ "node_modules/.bin/prettier --write", "node_modules/.bin/eslint --fix", "git add" ], "src/*.{css,scss,less,json,html,md,markdown}": [ "node_modules/.bin/prettier --write", "git add" ] } } |
vscode保存自动格式化
配置setting.json如下
1 2 3 4 5 | { "editor.codeActionsOnSave": { "source.fixAll": true } } |