eslint && prettier 配置冲突解决

Nicolas Shawn江苏

1.eslint、preitter

1.先建一个.prettierrc文件
echo {}> .prettierrc
2.创建.prettierignore
 类似于.gitignore, 表示不需要格式化的文件
3.手动格式化:yarn prettier --write.
4.自动格式化:pre-commit Hook 
    npx mrm lint-staged

2.pre-commit hook: 提交前自动格式化

npx mrm lint-staged
## package.json  针对某系文件进行格式化, 自动保存的一个配置
...........
"devDependencies": {
    ......
    "husky": ">=6",
    "lint-staged": ">=10",
    "prettier": "^2.2.1"
  },
  "lint-staged": {
    "*.{js,css,md,ts,tsx}": "prettier --write"
  }

3.解决冲突

npm install eslint-config-prettier -D
## package.json中
......
"eslintConfig": {
    "rules": {
      "@typescript-eslint/no-unused-vars": "off"
    },
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"  // 用prettier的规则覆盖一部分eslint的规则
    ]
  },
}

.husky 文件添加到git: git add .

4.commitlint

检测commit message提交是否规范
npm install @commitlint/config-conventional @commitlint/cli -D
## 创建文件: commitlint.config.js
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
npx husky add .husky/commit-msg "yarn commitlint --edit $1"
阅读 324

前端工程师, 关注前沿动态

7 声望
0 粉丝
0 条评论

前端工程师, 关注前沿动态

7 声望
0 粉丝
宣传栏