研究了一晚上，简单告诉你如何配置eslint和prettier！

1.安装eslint和prettier插件和工具库

插件是必须的，安装方法很简单，只需要在vscode的插件市场搜索安装即可。

工具库安装只需要在项目文件夹中通过终端运行npm i -D eslint prettier

2.创建配置文件

在项目根目录下创建.eslintrc.js(或.eslintrc.json，eslint配置文件支持两种格式)和.prettierrc文件

.eslintrc.js配置

module.exports = {
  root: true, // 最高级配置
  // 语法支持
  parserOptions: {
    sourceType: 'module', // 模块化
    ecmaVersion: 6, // 支持es6
  },
  extends: ['eslint:recommended'], // 规则扩展,这里用的是eslint推荐配置
  // 全局变量定义
  env: {
    browser: true,
    es6: true,
    jest: true,
    node: true
  },
  // 自定义规则,具体参考https://cn.eslint.org/docs/rules/
  rules: {
    'prefer-const': 'warn',
    'no-undef': 'off',
    'no-var': 'warn',
  },
}

.prettierrc配置

{
  "tabWidth": 2, // 缩进
  "singleQuote": true, // 使用单引号
  "semi": false, // 不要分号
}

创建完这两个文件后，通过右键菜单的使用...格式化文档来选择eslint或prettier来格式化文档。但是这个时候我们只能够分别通过eslint或prettier的规则来进行格式化，这两者在规则上是会有部分冲突的，所以我们要进一步进行配置。

3.使eslint和prettier两者一起工作

prettier官方提供了和linter协作的解决方案（Integrating with Linters），对于eslint，有eslint-config-prettier和eslint-plugin-prettier以及prettier-eslint。

• 方案一（通过eslint-config-prettier（解决和eslint的规则冲突）和eslint-plugin-prettier（使prettier规则可以再eslint中使用）） 同时安装这两个库npm i -D eslint-config-prettier eslint-plugin-prettier

修改.eslintrc.js,在extends中添加plugin:prettier/recommended（注意需要添加到最后一项，否则可能无法覆盖规则冲突）

module.exports = {
  root: true, // 最高级配置
  // 语法支持
  parserOptions: {
    sourceType: 'module', // 模块化
    ecmaVersion: 6, // 支持es6
  },
  extends: ['eslint:recommended', 'plugin:prettier/recommended'], // 规则扩展,这里用的是eslint推荐配置
  // 全局变量定义
  env: {
    browser: true,
    es6: true,
    jest: true,
    node: true
  },
  // 自定义规则,具体参考https://cn.eslint.org/docs/rules/
  rules: {
    'prefer-const': 'warn',
    'no-undef': 'off',
    'no-var': 'warn',
  },
}

配置完之后我们只需要将eslint设置为默认格式化插件就可以同时使用eslint和prettier的规则格式化。

方案一十分方便，比较推荐这个方案，唯一感觉不好的是开发的时候你要面临大量的红色波浪线（报错提示），可能开发体验会稍微差点，而且格式化的速度没有单纯用prettier快（这个其实影响不大）

• 方案二（prettier-eslint） 这个方案还是将eslint和prettier当成两个库使用，通过连续运行它们的格式化命令使它们能够一起工作，它的格式化顺序是先用prettier再用eslint。

安装prettier-eslintnpm i -D prettier-eslint

在package.json的script中配置命令

script: {
	"format": "prettier-eslint --write 'src/**/*.{js,jsx}' "
}

在终端中运行npm run format格式化src文件夹下所有的js和jsx文件。

方案二在使用上可能没有方案一方便，但是它的好处是可以一次性格式化所有目标文件，看个人需求选择吧。

结语

以上就是配置eslint和prettier的所有内容，欢迎交流学习。