create-react-app整合prettier,实现代码自动格式化

vscode整合prettier、eslint

  • 介绍
  • 前提条件
  • 过程
    • 安装prettier
    • 创建.eslintrc.js 配置如下
    • 创建.prettierrc文件,配置如下
    • 提交时校验
      • 安装插件
      • 配置
    • vscode保存自动格式化

介绍

最近在学习react,通过create-react-app创建项目,发现项目中只整合了eslint,并没有整合prettier,通过一顿摸索及查阅资料,整合成功。特记录下来过程,以备不时之需。

前提条件

  • 编辑器vscode,并且已经安装好eslintprettier插件
  • 使用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
  }
}

你可能感兴趣的:(create-react-app整合prettier,实现代码自动格式化)