标签：格式化 prettier vscode 代码 校验 Prettier ESLint 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中安装如下插件

标签：格式化,prettier,vscode,代码,校验,Prettier,ESLint,eslint
来源： https://www.cnblogs.com/it774274680/p/16433251.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。