create-react-app整合prettier,实现代码自动格式化
vscode整合prettier、eslint介绍前提条件过程安装prettier创建.eslintrc.js 配置如下创建.prettierrc文件,配置如下提交时校验安装插件配置vscode保存自动格式化介绍最近在学习react,通过create-react-app创建项目,发现项目中只整合了eslint,并没有整合prettier,通过一顿摸索及查阅资料,整合成功。特记录下来过程,以备不时之
·
vscode整合prettier、eslint
介绍
最近在学习react,通过create-react-app创建项目,发现项目中只整合了eslint,并没有整合prettier,通过一顿摸索及查阅资料,整合成功。特记录下来过程,以备不时之需。
前提条件
- 编辑器
vscode
,并且已经安装好eslint
和prettier
插件 - 使用creat-react-app创建项目
过程
安装prettier
yarn add eslint-plugin-prettie -dev
yarn add eslint-config-prettier -dev
yarn add prettier -dev
创建.eslintrc.js 配置如下
module.exports={
"extends": ["react-app"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
创建.prettierrc文件,配置如下
{
"singleQuote": false,
"semi": true
}
这里我只配置了两个队则,使用单引号,结尾加分号,其他规则自行查阅相关资料
提交时校验
安装插件
yarn add lint-staged husky -dev
配置
//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如下
{
"editor.codeActionsOnSave": {
"source.fixAll": true
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)