preface

Yesterday, a member of my open source project submitted code to me. I was using WebStorm to look at his code and found a bunch of yellow errors related to the code format. I asked him if your editor didn’t give you a hint about these yellow errors. He said the vscode he used did not indicate these errors.

So, I personally downloaded vscode to make the next found no tips, baidu and dig under vscode configuration eslint+prettier article did not work, finally stepped on a lot of holes, the configuration succeeded.

If you are interested in this article, I would like to share how to configure Eslint+Prettier on vscode.

Writing in the front

The project used in this article already has dependency packages in package.json and configuration files in the project root directory. Webstorm can correctly recognize my configuration file and format it when saving, vscode can’t, this is the purpose of this article to solve this problem.

The project address used in this article: chat-system

Plug-in installation

We first need to install the relevant plug-ins for vscode.

  • Install the esLint and prettier plug-ins

The plug-in USES

Here you can directly modify the VScode settings.json file. Such changes are local and cannot be synchronized. If someone else is using VScode, you have to tell them what to change.

I chose to create the.vscode folder in the root directory of the project, and then create settings.json under it, and synchronize this folder to Git. This way, VScode will read the configuration files in the root directory first.

After the file is created, add the following configuration:

{
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.alwaysShowStatus": true."eslint.format.enable": true."eslint.packageManager": "yarn"."eslint.run": "onSave"."prettier.packageManager": "yarn"."eslint.validate": [
    "vue"."javascript"."javascriptreact"]."editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "vetur.validation.template": false."editor.formatOnPaste": true."editor.formatOnType": true."editor.formatOnSave": true."files.eol": "\n"
}
Copy the code

Note: If you enable Prettier but do not have the associated configuration file, the editor.formatOnSave option should be set to false. Otherwise it will conflict with vscode’s own saving

Prettier next, we configure prettier, also creating the. Prettierrc. json file in the root directory of the project, adding the following:

{
  "tabWidth": 2."useTabs": false."endOfLine": "auto"."singleQuote": false."semi": true."trailingComma": "none"."bracketSpacing": true
}

Copy the code

The above configuration is the relevant specification of my project. You can do it according to your actual needs. If you don’t know anything about it, you can refer to the official documents.

After the above configuration, vscode will now be prompted according to our specifications and will be formatted according to our custom specifications when we save the code by pressing CTRL +s.

Under the Windows of the pit

After the above configuration, there was no problem on MAC, everything went according to my configuration rules, however, my Project member on Windows said that the comment formatting did not work, I configured the comment must have a space, when press CTRL + S automatically formatted.

There were a number of solutions to this problem, none of which worked, and I was about to give up when I came across a disabled flag under vscode (as shown below).

After prettier is enabled, vscode disables eslint by default. I tried clicking the disable icon twice and it appeared as shown below. Select the first one.

Sure enough, after doing that, ESLint checked one of the flags, I tried Ctrl+ S again, and the comments were automatically formatted according to my rules.

Write in the last

  • If there are any errors in this article, please correct them in the comments section. If this article helped you, please like it and follow 😊
  • This article was first published in nuggets. Reprint is prohibited without permission 💌