vscode使用prettier和eslint

需求

使用prettier插件进行美化，使用eslint进行代码的校验，但是我们在vscode安装了着两个插件后发现会有冲突

疑问

1. Slint和Prettier格式化的区别？
   eslint（包括其他一些 lint 工具）的主要功能包含代码格式的校验，代码质量的校验。而 Prettier 只是代码格式的校验（并格式化代码），不会对代码质量进行校验。代码格式问题通常指的是：单行代码长度、tab长度、空格、逗号表达式等问题。而代码质量问题指的是：未使用变量、三等号、全局变量声明等问题。

2. 配合使用时到底谁的格式化在生效？
   ESLint 和 Prettier 相互合作的时候有一些问题，对于他们交集的部分规则，ESLint 和 Prettier 格式化后的代码格式不一致。导致的问题是：当你用 Prettier 格式化代码后再用 ESLint 去检测，会出现一些因为格式化导致的 warning。这个时候有两个解决方案：
   1.运行 Prettier 之后，再使用 eslint --fix 格式化一把，这样把冲突的部分以 ESLint 的格式为标准覆盖掉，剩下的 warning 就都是代码质量问题了。
   2.在配置 ESLint 的校验规则时候把和 Prettier 冲突的规则 disable 掉，然后再使用 Prettier 的规则作为校验规则。那么使用 Prettier 格式化后，使用 ESLint 校验就不会出现对前者的 warning。

解决办法

prettier的配置

1. 在项目中安装prettier的开发时依赖

npm install prettier -D

2. 在项目中创建.prettierrc文件

{
  // 选择tab缩进还是空格
  "useTabs": false,
  // 缩进多少个空格
  "tabWidth": 2,
  // 单行字符的长度
  "printWidth": 80,
  // 使用单引号
  "singleQuote": true,
  // 是否需要在末尾添加逗号，比如对象属性后
  "trailingComma": "none",
  // 语句末尾是否需要添加分号
  "semi": false
}

3. 在项目中创建.prettierignore文件

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

4. vscod安装prettier插件
   

5. 在项目的package.json的script新增如下配置

"script":{
   "prettier": "prettier --write ."
}

如果如上步骤操作完没有自动格式化的话，那么就手动执行一下"npm run prettier"命令

eslint

vscode中安装如下插件