VS Code Prettier Setting Guildline

🚀 Quick start

1. Download VSCode extensions

   • EditorConfig: Formatter file types that Prettier can't identify
   • Prettier: VSCode Default Formatter for most file types
   • ESLint: Find and fix problems in your JavaScript code
   • stylelint: helps you avoid errors and enforce conventions in your styles

2. EditorConfig

   EditorConfig allows you to define indentation style and other whitespace settings for any file type. This way your editor can automatically choose the correct settings. This is handy when developers use platforms with different line endings, e.g., Mac and Windows.

   Use this plugin to format any file type that prettier and eslint can't identify.

   Create .editorconfig file:

   # EditorConfig is awesome: https://EditorConfig.org
   
   # top-most EditorConfig file
   root = true
   
   # # Unix-style newlines with a newline ending every file
   [*]
   end_of_line = lf
   charset = utf-8
   insert_final_newline = true
   trim_trailing_whitespace = true
   indent_style = space
   indent_size = 2

3. Install Prettier

   Prettier code formatter for most web development file types, like JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, YAML and so on.

   npm install -D prettier

   Create .prettierrc.yaml file:

   # .prettierrc or .prettierrc.yaml
   trailingComma: "es5"
   tabWidth: 2
   semi: true
   singleQuote: true

4. Install Eslint

   Find and fix problems in your JavaScript code.

   Install Eslint and Prettier libraries:

   npm install -D eslint

   Install eslint-config-airbnb:

   npx install-peerdeps --dev eslint-config-airbnb

   Install eslint-config-prettier(turns off all rules that are unnecessary or might conflict with Prettier) and eslint-plugin-prettier(runs Prettier as an ESLint rule and reports differences as individual ESLint issues):

   npm install -D eslint-config-prettier eslint-plugin-prettier

   Create .eslintrc.json file:

   {
     "extends": ["airbnb", "prettier"],
     "plugins": ["prettier"],
     "rules": {
       "prettier/prettier": ["error"],
       "react/jsx-filename-extension": "off",
       "react/prefer-stateless-function": "off",
       "react/prop-types": "off",
       "react/destructuring-assignment": "off"
     }
   }

5. Prettier Plugins

   Prettier Plugins are automatically loaded if you have them installed in the same node_modules directory where prettier is located. Plugin package names must start with @prettier/plugin- or prettier-plugin- or @<scope>/prettier-plugin- to be registered.

6. Install stylelint

   npm install -D stylelint stylelint-config-standard

   Create .stylelintrc.json file

   {
     "extends": [
       "stylelint-config-standard",
       "stylelint-config-idiomatic-order"
     ]
   }

7. Default Formatter

   To ensure that this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings. This setting can be set for all languages or by a specific language.

   Create .vscode/settings.json file:

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

8. Auto format

   Format on save, "editor.formatOnSave": true

   // .vscode/settings.json
   
   {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     // Use prettier format default
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
       // Use eslint instead of prettier
       "source.fixAll.eslint": true,
       // Use tslint instead of prettier
       "source.fixAll.tslint": true,
       // Use stylelint instead of prettier
       "source.fixAll.stylelint": true
     },
     // Disable prettier format js
     "[javascript]": {
       "editor.formatOnSave": false
     },
     // Disable prettier format jsx
     "[javascriptreact]": {
       "editor.formatOnSave": false
     },
     // Disable prettier format ts
     "[typescript]": {
       "editor.formatOnSave": false
     },
     // Disable prettier format tsx
     "[typescriptreact]": {
       "editor.formatOnSave": false
     },
     // Disable prettier format css
     "[css]": {
       "editor.formatOnSave": false
     },
     // Disable build-in error report
     "css.validate": false,
     "less.validate": false,
     "scss.validate": false
   }