其他分享
首页 > 其他分享> > vscode使用prettier和eslint

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
  1. 在项目中创建.prettierrc文件
{
  // 选择tab缩进还是空格
  "useTabs": false,
  // 缩进多少个空格
  "tabWidth": 2,
  // 单行字符的长度
  "printWidth": 80,
  // 使用单引号
  "singleQuote": true,
  // 是否需要在末尾添加逗号,比如对象属性后
  "trailingComma": "none",
  // 语句末尾是否需要添加分号
  "semi": false
}
  1. 在项目中创建.prettierignore文件
/dist/*
.local
.output.js
/node_modules/**

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

/public/*
  1. vscod安装prettier插件

  2. 在项目的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