prettier

prettier是一个专注于所有代码格式的模块

npm包

通过 npm i prettier -g 全局安装,日常项目中都会带有prettier依赖，所以可以凭自己意愿全不全局安装,全局安装可以在命令行中直接使用prettier，否则需要通过npx prettier 的方式来运行prettier

他与eslint不同的点在于，他并不强制要求存在配置文件，会有一套默认的配置

当然尽管它自己不强制要求配置文件，但在我们日常的开发中，往往都会自定义规则，所以我们应该提供一个适用于当前项目的规则配置

//prettier配置文件比较简洁，专注于代码格式，只需要配置规则
module.exports = {
  trailingComma: 'es5',
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

我们同样在配置完规则之后提供一个测试文件

//prettier_test.js
var a = 1;
const test_2 = "test";
 
console.log('clg');

然后我们通过npx prettier --write ./prettier_test.js来进行格式检查和修正,下面是经过修正之后的结果

var a = 1;
const test_2 = "test";
 
console.log("clg");

vscode插件

与eslint的vscode插件原理一致，prettier的vscode插件只是为了方便我们自己，如果我们想在写代码的时候，一Ctrl+S保存就能自动格式化代码，而不需要去额外执行prettier --write ./prettier_test.js，这时候就需要插件来帮助我们了

首先我们在应用商店中搜索同名插件prettier并进行下载

在setting.json来配置我们的自动保存的默认格式化选项

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},

同时需要开启这两个功能(setting界面搜“格式化”)

之前我们说过，prettier不强制需要配置文件，所以我们可以在没有配置文件的时候使用prettier，那怎么配置我们在没有配置文件时候的配置规则呢，可以直接在设置里面进行设置(这里的设置会同步到setting.json，其实我们知道这个界面只是setting.json的图形化界面)

也可以在setting.json中进行设置

"prettier.arrowParens": "avoid",
"prettier.bracketSameLine": true,
"prettier.jsxSingleQuote": true,

下面给出一个示例

//修复之前的代码
var a = 1
const test_2 = "test";
console.log('clg');

保存之后,可以看到他帮助我们进行了格式的修改

var a = 1;
const test_2 = "test";
console.log("clg");

prettier & eslint 冲突

如果同时使用eslint和prettier的自动保存,并且规则配置存在冲突，比如eslint中配置为优先使用双引号，而prettier中配置为优先使用单引号，一般而言都是先执行eslint的配置，再执行prettier的配置，所以最后的表现结果为prettier的配置会覆盖掉eslint的配置

一般有三种解决办法

• 只开启其中一个插件的自动保存
• 将eslint与prettier配置中存在冲突的那一部分保持一致
• eslint-plugin-prettier：把prettier当作eslint的一个插件，重合的部分按照prettier的规则来