VSCode 插件之 Prettier「建议收藏」

大家好，欢迎来到IT知识分享网。

prettier-vscode

github.com/prettier/pr…

prettier-resolution

prettier-vscode 插件将使用当前项目本地依赖中的 prettier（推荐）。当 prettier.resolveGlobalModules 被设置为 true 时（settings.json），prettier-vscode 插件也可以尝试解析全局 prettier。如果本地依赖和全局都没有安装 prettier，那么将使用 prettier-vscode 插件捆绑的 prettier。

Configuration

有多种方式可以配置 prettier 的格式化选项。你可以使用 VSCode settings.json、prettier 配置文件或 .editorconfig 文件。VSCode settings.json 是用来作为备用的，通常只用于非项目文件，不能用于 prettier CLI。建议你总是在项目中包含一个 prettier 配置文件，这将确保无论你以何种方式运行 prettier（通过 prettier-vscode 插件 or prettier CLI [prettier --single-quote ]），都将应用同样的格式化选项。

推荐使用 prettier 配置文件来设置格式化选项。如果你想将 prettier 的格式化选项应用于整个项目，只需在项目根目录下添加一个 prettier 配置文件即可。

Settings

Prettier Settings ：所有的 prettier 选项都可以直接在插件中进行配置（settings.json），这些配置的默认值始终是 prettier 2.0的默认值。

prettier.arrowParens: "always"
prettier.bracketSpacing: true
prettier.endOfLine: "lf"
prettier.htmlWhitespaceSensitivity: "css"
prettier.insertPragma: false
prettier.jsxBracketSameLine: false
prettier.jsxSingleQuote: false
prettier.printWidth: 80
prettier.proseWrap: "preserve"
prettier.quoteProps: "as-needed"
prettier.requirePragma: false
prettier.semi: true
prettier.singleQuote: false
prettier.tabWidth: 2
prettier.trailingComma: "es5"
prettier.useTabs: false
prettier.vueIndentScriptAndStyle: false
prettier.embeddedLanguageFormatting: auto

IT知识分享网

Extension Settings：这些设置是 VSCode 特有的，需要在 settings.json 中进行设置。
- prettier.enable (default: true)
  
  控制是否启用 prettier 插件。当你改变这个设置时，你必须重新启动 VSCode。
- prettier.prettierPath
  
  提供一个到 npm prettier 包的自定义路径。这个路径应该是模块文件夹，而不是 bin/script 路径，即 ./node_modules/prettier，而不是 ./bin/prettier。
- prettier.resolveGlobalModules (default: false)
  
  启用后，如果没有本地依赖，该插件将尝试使用全局 npm 或 yarn 模块。
- prettier.useEditorConfig (default: true)
  
  是否在解析配置时考虑到 .editorconfig。
- 其余配置见官网

VSCode 安装的 eslint 和 prettier 插件和 npm 安装的有什么区别

VSCode 中安装的是在编辑器里面用的，如果项目根目录下有 eslintrc 和 prettierrc 配置文件，VSCode 插件会自动读取配置文件中的配置检查你的代码和格式化文件，npm 安装的是在命令行中运行的。如果你只安装 npm 包，VSCode 是不会有 lint 提示的，只能通过命令行，在小黑窗查看不符合 lint 规则的检测信息。安装 npm 包最主要的原因是可以通过 git hook 强制提交代码前 lint 和格式化代码保证代码仓库的代码风格统一。

如何在 VSCode 中使用 prettier 格式化代码？

首先在 VSCode 安装 prettier 插件。

配置插件 prettier

通过 VSCode -> 首选项 -> 设置（settings.json），可配置 VSCode 编辑器的默认格式化工具，也可根据语言设置其对应的默认格式化工具。

IT知识分享网{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置编辑器的默认格式化工具为 prettier
  "[javascript]": { // 根据语言设置其对应的默认格式化工具
      "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置 javascript 的默认格式化工具为 prettier
      "editor.formatOnSave": true, // 保存的时候自动格式化
  },
}

我们还可以在 settings.json 进行 prettier 选项的配置，这些配置会覆盖 prettier-vscode 插件捆绑的 prettier 的默认格式化选项。

{
  "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置 javascript 的默认格式化工具为 prettier
      "editor.formatOnSave": true, // 保存的时候自动格式化
  },
  // prettier 选项配置
  "prettier.semi": false, // 语句末尾添加分号
  "prettier.singleQuote": true // 使用单引号
}

测试：
- 如果当前项目本地依赖没有安装 npm prettier 包，也没有 prettier 配置文件，那么 VSCode 会使用 prettier-vscode 插件捆绑的 prettier 的默认格式化选项 + settings.json 中的 prettier 格式化选项，如下图。
  
  格式化前后对比：去掉了分号（semi: false）；使用单引号（singleQuote: true）；对象最后一个属性加上逗号（trailingComma: “es5″）；我本地使用的 prettier-vscode 插件捆绑的 prettier 版本大于 v2.0.0，因此 trailingComma 的默认值是 es5，所以会在对象最后一个属性加上逗号。
```
IT知识分享网// test-prettier.js 格式化前
function test() {
  const obj = {
    a: 1,
    b: 2
  };
  const str = 1;
  if (str == "1") {
    return true;
  }
}
test();

// test-prettier.js 格式化后
function test() {
  const obj = {
    a: 1,
    b: 2,
  }
  const str = 1
  if (str == '1') {
    return true
  }
}
test()
```
- 如果当前项目本地依赖安装了 npm prettier 包，但是没提供 prettier 配置文件，那么 VSCode 会使用 prettier-vscode 插件捆绑的 prettier 的默认格式化选项 + settings.json 中的 prettier 格式化选项（同上），如下图。
  
  格式化前后对比：去掉了分号（semi: false）；使用单引号（singleQuote: true）；对象最后一个属性加上逗号（trailingComma: “es5″）；我本地依赖安装的 prettier 版本是 1.17.1，这个版本的 trailingComma 默认值是 none，而打印出来的 trailingComma 却是 es5，并且最终在对象最后一个属性加上了逗号，由此得知 VSCode 使用的是 prettier-vscode 插件捆绑的 prettier 的默认格式化选项 + settings.json 中的 prettier 格式化选项。
```
// main.js 格式化前
import Vue from "vue";
import App from "./App";
import router from "./router";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  render: h => h(App)
});

// main.js 格式化后
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: (h) => h(App),
})
```
- 如果当前项目本地依赖安装了 npm prettier 包，也提供了 prettier 配置文件，那么 VSCode 会使用 npm prettier 包的默认格式化选项 + prettier 配置文件中的格式化选项，忽略 settings.json 中的 prettier 格式化选项，如下图。
  
  格式化前后对比：去掉了分号（semi: false）；使用单引号（singleQuote: true）；对象最后一个属性去掉逗号（trailingComma: “none”）；我本地依赖安装的 prettier 版本是 1.18.2，这个版本的 trailingComma 默认值是 “none”，prettier-vscode 插件捆绑的 prettier 版本是 2.2.0，这个版本的 trailingComma 默认值是 “es5″，最终在对象最后一个属性去掉了逗号，由此得知 VSCode 使用的是 npm prettier 包的默认格式化选项 + prettier 配置文件中的格式化选项。
```
// main.js 格式化前
import Vue from "vue";
import App from "./App";
import router from "./router";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  render: h => h(App),
});

// main.js 格式化后
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
```
  注意：trailingComma: “es5” 只会在多行对象的最后一个属性加上逗号，单行的对象不会加。
```
const obj1 = {
  a: 1,
  b: 2   // 会加逗号
}
const obj2 = { a: 1, b: 2 } // 不会加逗号
```
- 如果当前项目本地依赖没有安装 npm prettier 包，但是提供了 prettier 配置文件，那么 VSCode 会使用 prettier-vscode 插件捆绑的 prettier 的默认格式化选项 + prettier 配置文件中的格式化选项，忽略 settings.json 中的 prettier 格式化选项，如下图。
  
  格式化前后对比：去掉了分号（semi: false）；使用单引号（singleQuote: true）；删掉花括号两边的空格（bracketSpacing: false）；
```
// main.js 格式化前
import Vue from "vue";
import App from "./App";
import router from "./router";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  render: h => h(App)
});

// main.js 格式化后
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: (h) => h(App),
})
```
- 总结
  - 无 npm 包无配置文件，使用捆绑 prettier + settings.json。
  - 有 npm 包无配置文件，使用捆绑 prettier + settings.json。
  - 有 npm 包有配置文件，使用npm prettier + 配置文件。
  - 无 npm 包有配置文件，使用捆绑 prettier + 配置文件。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/9420.html

VSCode 插件之 Prettier「建议收藏」

prettier-vscode

VSCode 安装的 eslint 和 prettier 插件和 npm 安装的有什么区别

如何在 VSCode 中使用 prettier 格式化代码？

相关推荐

发表回复