This text knows the address – knows not to know

Vscode version: 1.51.1

Without further ado, what are these plug-ins

Vetur (0.30.3) : Simply a plug-in that recognizes vue files, provides highlighting, and code formatting

Prettier (5.8.0) : Powerful code formatting tool for many languages

Eslint (2.1.13) : Code checking tool to see if your code conforms to specifications

Most of our projects use ESLint constraints, but if the project does not have ESLint constraints, you will need to install plugins if you want your code to have certain specifications. However, there is a problem: in some specifications, the three standards are not the same, who should listen to this time, your vscode is not saved after the code twitches

Prettier is usually the host of Prettier when esLint is not used. Vetur has little conflict with esLint, so it would be nice to deal with them separately

So now it’s esLint and Prettier, in addition to the configuration you can find on the Internet, the most important thing is setting Prettier in the project’s package.json

{"prettier": {"trailingComma": "None ", "eslintIntegration": true, // As version changes, start singleQuote in the project: true, "arrowParens": "always" } }Copy the code

I also attached my vscode configuration and some plugins I used

{
  "workbench.sideBar.location": "right",
  "workbench.colorTheme": "One Dark Pro",
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "editor.lineHeight": 24,
  "editor.fontSize": 18,
  "editor.renderWhitespace": "all",
  "editor.formatOnSave": true,
  "editor.snippetSuggestions": "top",
  "editor.wordWrap": "on",
  "files.eol": "\n",
  "merge-conflict.autoNavigateNextConflict.enabled": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatter.ts": "vscode-typescript",
  "vetur.format.options.tabSize": 2,
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 100
    }
  },
  "eslint.lintTask.enable": true,
  "eslint.format.enable": true,
  "eslint.alwaysShowStatus": true,
  "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript"],
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": true
    // "source.fixAll.eslint": true
    // "source.fixAll.tslint": false,
  },
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "git.enableSmartCommit": true,
  "git.showPushSuccessNotification": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "task.slowProviderWarning": ["typescript"],
  "prettier.trailingComma": "none",
  "prettier.printWidth": 100,
  "prettier.vueIndentScriptAndStyle": true,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "emmet.triggerExpansionOnTab": true,
  "editor.renameOnType": true,
  "html.format.indentHandlebars": true,
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.associations": {
    "*.ejs": "html"
  },
  "search.followSymlinks": false
}
Copy the code

What do you have to use plug-ins, please leave a message

This text knows the address – knows not to know