Prettier for VSCode

prettier-vscode

Github.com/prettier/pr…

prettier-resolution

Prettier – the vscode plug-in uses prettier in the current project’s local dependency (recommended). When the prettier. ResolveGlobalModules is set to true (Settings. Json), prettier – vscode plug-in can also try resolving global prettier. If prettier is not installed locally or globally, the binding of prettier-vscode plug-in prettier is used.

Configuration

Formatting options for Prettier can be configured in several ways. Json, prettier configuration file, or.editorConfig file. Json is used as a backup, usually only for non-project files, not for prettier CLI. It is recommended that you always include a prettier configuration file in your project. This will ensure that no matter how you run Prettier (by prettier-vscode or prettier CLI [prettier –single-quote]), The same formatting options will be applied.

It is recommended to use the prettier configuration file to set formatting options. If you want to apply Prettier’s formatting option to an entire project, simply add a Prettier configuration file in the project root directory.

Settings

Prettier Settings: All Prettier options can be configured directly in the plug-in (settings.json) and the default for these configurations is always the default for 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
Copy the code

Extension Settings: these Settings are specific to VSCode and need to be set in settings.json.
- prettier.enable (default: true)
  
  Controls whether the prettier plug-in is enabled. When you change this setting, you must restart VSCode.
- prettier.prettierPath
  
  Provide a custom path to the NPM Prettier package. /node_modules/prettier, not./bin/prettier.
- prettier.resolveGlobalModules (default: false)
  
  When enabled, the plug-in will try to use the global NPM or YARN module if there are no local dependencies.
- prettier.useEditorConfig (default: true)
  
  Whether.editorConfig is considered when parsing the configuration.
- For other configurations, see the official website

What is the difference between eslint and prettier plugins installed by VSCode and NPM

If there are eslintrc and prettierrc configuration files in the root directory of the project, the VSCode plug-in automatically reads the configuration files and examines your code and formatting files. NPM is installed on the command line. If you only install the NPM package, VSCode will not be prompted by lint. You will have to use the command line to view detection messages that do not comply with lint rules in a small black window. The main reason for installing the NPM package is that you can use git hooks to enforce lint and formatting before committing code to keep your repository code consistent.

How do I format code using prettier in VSCode?

Install the prettier plug-in in VSCode first.

Example Configure the plug-in prettier

Use VSCode -> Preferences -> Settings (settings.json) to configure the default formatting tool for the VSCode editor. You can also set the default formatting tool according to the language.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode".// Set the editor's default formatting tool to prettier
  "[javascript]": { // Set the default formatting tool according to the language
      "editor.defaultFormatter": "esbenp.prettier-vscode".// Set the default formatting tool for javascript to prettier
      "editor.formatOnSave": true.// Automatically formatting when saving}},Copy the code

Json, which override the default formatting for Prettier bundled with the prettier plugin.

{
  "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode".// Set the default formatting tool for javascript to prettier
      "editor.formatOnSave": true.// Automatically formatting when saving
  },
  // Prettier is configured
  "prettier.semi": false.// Add a semicolon to the end of the statement
  "prettier.singleQuote": true // Use single quotes
}
Copy the code

Testing:
- If the NPM Prettier package is not installed and the prettier configuration file is not used locally, VSCode uses Prettier – the default format for prettier bundled with VSCode + settings.json where prettier is formatted, as shown below.
  
  Before and after formatting: semicolons (semi: false) removed; Use single quotes (true); Object attribute with a comma (trailingComma: “es5”); The native prettier-VS code plug-in I use binds prettier to a version larger than V2.0.0, so trailingComma defaults to ES5, adding a comma to the last property of the object.
```
// test-prettier.js before formatting
function test() {
  const obj = {
    a: 1.b: 2
  };
  const str = 1;
  if (str == "1") {
    return true;
  }
}
test();

// test-prettier.js is formatted
function test() {
  const obj = {
    a: 1.b: 2,}const str = 1
  if (str == '1') {
    return true
  }
}
test()
Copy the code
```
- If the NPM Prettier package is installed locally but the prettier configuration file is not provided, VSCode uses Prettier – the default formatting option for prettier bundled with VSCode + Settings. json where prettier is formatted, as shown below.
  
  Before and after formatting: semicolons (semi: false) removed; Use single quotes (true); Object attribute with a comma (trailingComma: “es5”); The version where I locally installed Prettier is 1.17.1, where trailingComma defaults to None while trailingComma is ES5 and finally adds a comma to the last property of the object, Prettier + settings.json VSCode uses prettier- the default formatting option for prettier bundled with VSCode + settings.json
```
// before formatting 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 is formatted
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),
})
Copy the code
```
- If the current project relies on the NPM prettier package installed and the prettier configuration file is provided, VSCode uses the NPM prettier package’s default formatting option + the formatting option in the prettier configuration file. Ignore the prettier formatting option in settings.json, as shown below.
  
  Before and after formatting: semicolons (semi: false) removed; Use single quotes (true); Object remove the comma (trailingComma: “None”) from the last property. Prettier version 1.18.2 where trailingComma defaults to ‘none’, version 2.2.0 where vscode binds prettier This version of trailingComma defaults to ‘es5’ and eventually removes the comma from the last property of the object, thereby indicating that VSCode is using the default formatting option for the NPM prettier package + prettier configuration file.
```
// before formatting 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 is formatted
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)
})
Copy the code
```
  Note: trailingComma: ‘ES5’ will only add a comma to the last property of multi-line objects, not single-line objects.
```
const obj1 = {
  a: 1.b: 2   // add a comma
}
const obj2 = { a: 1.b: 2 } // Do not add commas
Copy the code
```
- If the NPM Prettier package is not installed but the prettier configuration file is provided, Where VSCode uses Prettier – the default formatting option for prettier bundled with VSCode + prettier in the configuration file, ignoring the prettier formatting option in settings.json, as shown below.
  
  Before and after formatting: semicolons (semi: false) removed; Use single quotes (true); Delete spacing around the braces (bracketSpacing: false);
```
// before formatting 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 is formatted
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),
})
Copy the code
```
- conclusion
  - NPM package No configuration file. Binding prettier + settings.json is used.
  - Json bundle prettier + settings.json if there is an NPM package but no configuration file.
  - If there is an NPM package with a configuration file, use the NPM prettier + configuration file.
  - The NPM package has a configuration file. Binding the prettier + configuration file is used.

prettier-vscode

What is the difference between eslint and prettier plugins installed by VSCode and NPM

How do I format code using prettier in VSCode?

Related Posts

Common vscode plug-ins

ASM bytecode modification tool

Automatic memory management system practice manual – Java and Golang comparison