如何配合使用ESLINT 和 PRETTIER

各自的作用

• eslint：静态分析语法错误
• prettier：代码格式化工具（需要在IDE中安装prettier的插件）

使用方法：

• 安装

  npm install eslint --save-dev
  // 创建 .eslintrc.json 文件
  npx eslint --init
  npm install eslint-config-prettier eslint-plugin-prettier prettier --save-dev
  

  作用
  eslint-config-prettier - 关闭eslint 和prettier中冲突的规则.
  eslint-plugin-prettier - 用eslint来检查prettier的报出的问题

• 配置

  • 在.eslintrc中添加

    "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"]
    

  • 在.prettierrc中添加自己的配置

    {"semi": true,"tabWidth": 2,"printWidth": 100,"singleQuote": true,"trailingComma": "none","jsxBracketSameLine": true
    }
    

  • package.json中添加

    "lint": "eslint .",
    "lint:fix": "eslint --fix",
    

附：

1. 可参考这个项目中的配置：自建前端组件库项目
2. VSCode中使用Prettier的教程可参考：VSCode 插件之 Prettier