We initialize a vue project and open it with vscode. The.vue file does not have syntax highlighting. To solve this problem, we install Vetur Extension

Install Vetur

Open the project, if vscode popover prompts:

Vetur can’t find tsconfig.json, jsconfig.json in /xxxx/xxxxxx

Because the project lacks tsconfig.json, jsconfig.json, but does not affect the normal use of formatting and syntax validation

Since tsconfig.json contains a lot of configuration items, manually creating and copying configurations from a project that you don’t even understand is not a good idea. For details on how to generate and write tsconfig.json, check out the typescript section

In addition to the syntax highlighting we need, Vetur provides additional support for formatting and syntax validation

formattingFormatting

A third-party tool is used for formatting. The default configuration is as follows

{
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.pug": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.sass": "sass-formatter"
}
Copy the code

Optional value is

  • prettier (opens new window): For css/scss/less/js/ts.
  • prettier (opens new window)with @prettier/plugin-pug (opens new window): For pug.
  • prettier-eslint (opens new window): For js. Run prettier and eslint –fix.
  • stylus-supremacy (opens new window): For stylus.
  • vscode-typescript (opens new window): For js/ts. The same js/ts formatter for VS Code.
  • sass-formatter (opens new window): For the .sass section of the files.

Since the above tools are built into Vetur, we do not need to install the corresponding plug-ins

Vetur bundles all the above formatters.

Additionally, we can modify the vscode configuration if we need to enable formatting when saving

"editor.formatOnSave": true,
Copy the code

Settings of VSCode are divided into USer and Workspace Settings

  • UserThe configuration in it will apply to all the items on the computer
  • WorkspaceIf configured, vscode will create one in the current folder.vscodeThe file)

Let’s call the page shown in the following figure Settings UI

At this point, you should be able to trigger formatting on save

If not, it may be your VScode installed more than Vetur a formatting tool, then we need to manually set the formatting tool to Vetur, the way is: right-click the file, select Format Document With…

To disable esLint, go to The Settings UI panel to Enable esLint > Format:Enable, and uncheck the Enables ESLint as a formatter box

Will be automatically synchronized to settings.json:

// settings.json
 "eslint.format.enable": true
Copy the code

If the default formatting rules do not meet your requirements, you can create a.prettierrc.js (or.prettierrc, etc.) file in the project. When Vutur detects the local.prettierrc.js file, it uses the rules in the local file

//.prettierrc.js module.exports = {"semi": false, // do not end "singleQuote": true}Copy the code

Grammar checkLinting / Error Checking

In User of vsCode Settings, add vue to esLint.validate

 "eslint.validate": [
      "javascript",
      "javascriptreact",
      "vue"
    ],
Copy the code

A good way to add is to: In the Settings UI, go to the User panel, search for ESLint in the input box, find esLint Validate, and click Edit in Settings. json. Consider editing settings.json directly

Vetur has eslint-plugin-vue built in, but only validates the template part of the.vue file

To verify the script portion of.js,.ts, and.vue files, let’s do the following

  1. thetemplateThe verification rights are transferred toeslintFor this, invscode SettingsIn the closedVetur 的 templatecheck
vetur.validation.template: false
Copy the code

  1. Install ESLint extension

  2. Installing local Dependencies

yarn add -D eslint eslint-plugin-vue
Copy the code

Since verification is completely devolved to ESLint, esLint cannot use the built-in eslint-plugin-vue in Vetur, so eslint-plugin-vue needs to be reinstalled

  1. in.eslintrc 的 extendsTo add to an arrayplugin:vue/recommended, the following example is added:
// .eslintrc
{
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
  "rules": {
    "vue/html-self-closing": "off"
  }
}
Copy the code

Because.eslintrc contains many configuration items, it’s extremely unreliable to manually create and copy configurations you don’t even understand from a project. For details on how to generate and write.eslintrc, see the Eslint Configuration section

Note that the extends array is executed from left to right, so if your project uses ESLint :recommended, plugin:vue/recommended must come after ESLint :recommended

Additionally, fix ESLint errors if you need to save

"editor.codeActionsOnSave": {
        "source.fixAll": true
    }
Copy the code

If used with Editor. formatOnSave:true, the formatting problem occurs twice

Eslint

In configuring Vetur, it is mentioned that the.eslintrc file needs to be modified, so the way to generate.eslintrc is

  1. Global installationeslint
yarn global add eslint
Copy the code
  1. Project folder
eslint --init 
Copy the code

Follow the prompts and choose step by step

So for the first question in the figure above, how do I choose? While Vetur supports code style, Eslint no longer needs it, but code style differences (such as ending with a semi-colon) can cause git conflicts, you might think, “I commit the.prettierrc file together with the ‘.prettierrc ‘file in the git repository.” Vetur supports global formatting rules, which are written in the User of vsCode Settings and cannot be included in.git

This in turn reminds us not to configure any rules in the User of vsCode Settings that will affect the formatting of the project

  • If the project members agreed, novscode SettingstheUserFormat the configuration, then the second option is preferred
  • Otherwise choose the third option, but the third option will causeprettier 和 eslintThe solution will be given later

Next, how to change the code style?

If your project uses ending semicolons, but you prefer a style without semicolons, you may want to change the formatting style

// .prettierrc.js
module.exports = {
    semi:false
}

Copy the code

CTRL + S to save the code and see that the project formatting succeeded, but ESLint reported another error

Analyze the reasons: CTRL + s to trigger editor. FormatOnSave, due to we set up the formatter for Vetur vue file, Vetur prettier formatting, and call format after finishing to Eslint do check, Eslint reported an error checking code styles

“Where prettier and ESLint collide

If you don’t select the third option when esLint –init answers the first question, you won’t have this collision problem

Then you might want to modify.eslintre.js again, etc… I don’t want to change the same rule in two places. What can I do to solve this problem? There are several industry solutions available, of which two are known

jsSome useeslintFormatting,css.htmlPart, usepretttier

Eslint can also act as a formatter. If you can get ESLint to overwrite prettier by formatting itself before checking prettier, it’s prettier-esLint. Vetur is built-in for prettier-eslint. Configuration is also simple

// settings.json
"vetur.format.defaultFormatter.js": "prettier-eslint",
Copy the code

To use:.eslintre.js to configure the JS formatting style,.pretttier.js to configure the HTML CSS formatting style

Set up theprettier 和 eslintWhen there is a conflict, toprettierGive priority to
  1. Install the following plug-ins
npm install --save-dev --save-exact prettier
npm install --save-dev eslint-plugin-prettier
npm install --save-dev eslint-config-prettier
Copy the code
  1. .eslintrc.jsonIn the configurationplugin:prettier/recommended 为 extendsThe last term of PI
// .eslintrc.json
{
  "extends": ["plugin:prettier/recommended"]
}
Copy the code

If you are using vue3, change it to vue3’s verification scheme

Extends: [' plugin: vue3 / essential ', / / it is' plugin: vue/essential ' 'reality - base', 'the plugin: prettier/it'].Copy the code

typescript

  1. Global installationts
yarn global add typescript
Copy the code
  1. Project, execution
tsc --init
Copy the code

Recommended order: TSC –init followed by eslint –init