弄懂Prettier相关npm包和VSCode插件

ESLlint是我们常用的代码质量检查工具，当然它也有代码风格检查的能力。ESLint在代码风格这块做到并够好，所以Prettier就出现了。官方自称Prettier是一个“有主见”的代码格式化工具。ESLint和Prettier的关系我们大致有了一个大概的了解，下面这边文章有详细的介绍：

搞懂 ESLint 和 Prettier

相关npm包

在使用ESLint的项目中，如果要使用Prettier，我们要安装额外的三个包：prettier、eslint-config-prettier和eslint-plugin-prettier。我们知道prettier是检查代码和格式化代码的，里面有各种各样的格式化代码的规则；eslint-config-prettier和eslint-plugin-prettier则是用来将prettier结合到eslint中的，那么它们是如何实现的呢？以下摘抄自：搞懂 ESLint 和 Prettier

1. 首先我们需要使用 eslint-config-prettier 来关掉 (disable) 所有和 Prettier 冲突的 ESLint 的配置（这部分配置就是上面说的，格式问题的配置，所以关掉不会有问题），方法就是在 .eslintrc 里面将 prettier 设为最后一个 extends

   // .eslintrc    
   {      
       "extends": ["prettier"] // prettier 一定要是最后一个，才能确保覆盖    
   }
   

2. (可选，推荐) 然后再启用 eslint-plugin-prettier ，将 prettier 的 rules 以插件的形式加入到 ESLint 里面并继承eslint-config-prettier的规则。这里插一句，为什么"可选" ？当你使用 Prettier + ESLint 的时候，其实格式问题两个都有参与，disable ESLint 之后，其实格式的问题已经全部由 prettier 接手了。那我们为什么还要这个 plugin？其实是因为我们期望报错的来源依旧是 ESLint ，使用这个，相当于把 Prettier 推荐的格式问题的配置以 ESLint rules 的方式写入，这样相当于可以统一代码问题的来源。

   // .eslintrc    
   {      
       "plugins": ["prettier"],      
       "rules": {        
           "prettier/prettier": "error"      
       }    
   }
   

将上面两个步骤和在一起就是下面的配置，也是官方的推荐配置

// .eslintrc
{
  "extends": ["plugin:prettier/recommended"]
}

VSCode插件

VSCode可以安装prettier的插件，安装这个插件之后就算我们的项目没有安装prettier的npm包，我们也可以利用prettier来格式化我们项目中的代码：

适用于prettier的npm包的代码规范设置，插件也同样适用，可以直接在VSCode的首选项中的prettier插件部分进行设置。除了在VSCode首选项中设置，它还可以识别prettier的配置文件，比如.prettierrc.js或者package.json中的prettier字段，并读取它们里面的配置用于格式化代码

• prettier插件通过prettier的配置文件、package.json中的prettier属性和prettier插件的选项来设置prettier的代码规范
• prettier的npm包通过prettier的配置文件和package.json中的prettier属性来设置prettier的代码规范
• ESLint除了通过prettier的配置文件和package.json中的prettier属性设置prettier的代码校验规则外，还可以在.eslintrc.js中设置prettier代码规范，当然这个设置只在对ESLint校验代码时生效，比如：

  // .esllintrc.js
  module.exports = {
    extends: [
      'plugin:prettier/recommended'
    ],
    rules: {
      'prettier/prettier': ['warn', { semi: false, singleQuote: true }]
    }
  }