Zero error zero warning should be a basic requirement for every programmer.

  • Develop vue applications with vscode
  • Author: Zhang Jing

FundebugReproduced with authorization, copyright belongs to the original author.

Now with VSCode development Vue. Js applications almost is the standard of the front, but many times we see messy code, as a front-end engineer, use single quotes, double quotes, a semicolon for a period of no semicolon, in some places there are commas in some places there is no comma, space carriage returns are not neat, also said that their work conscientiously, This is no laughing matter.

Today we start from the beginning, a complete story about a severe code cleanliness patient how to use vscode to develop vue, and how to put a body can be sentenced to death of various format errors tens of thousands of plastic surgery into a standard beauty.

Start with installation

For accuracy, we disabled all plug-ins in vscode and cleared out user Settings to make it as pristine as possible:

npm install -g @vue/cli
Copy the code

Then, we start creating projects:

vue create hello-world
Copy the code

Here, be sure to select the first option: Babel + esLint, both of which are essential. I’ve seen some people turn ESLint off manually after the project is set up because esLint is such a hassle.

Installation completed:

Let’s not rush to execute, executing the code is the easiest thing, let’s open the code and have a look:

Well, at least we need to install the Vetur plug-in first. This is almost certainly standard for vue projects, and vscode strongly recommends that you install it even if I don’t.

vetur

It can’t be formatted. It doesn’t even have a hint!

Format with Lint

Json, there is also a lint command. Let’s see if Lint can format automatically for us:

Lint says there are no errors! It’s just a mistake with a lot of space ok, why?

The @vue/prettier plug-in isn’t installed by default in VUe-CLI, so let’s install it manually:

yarn add -D @vue/eslint-config-prettier
Copy the code

Then, in package.json or.eslintrc.js or wherever you set esLint, add:

    "extends": [
      "plugin:vue/essential"."eslint:recommended"."@vue/prettier"].Copy the code

Especially this last one, @vue/prettier, is very important. Then execute yarn Lint. The extra Spaces were automatically eliminated, but we noticed that some of them had been tampered with as well:

All single quotes have been changed to double quotes, and semicolons have been added that were not at the end of the line. Why is that? Prettier because we didn’t set Prettier when prettier was introduced, we created a.prettierrc.js file in the root of the project and added:

module.exports = {
  semi: false.singleQuote: true
}
Copy the code

Execute yarn Lint again and now we see that Lint is working. Not only does it remove extra Spaces, but it also follows the rules by turning double quotes into single quotes and removing extra semicolons at the end of lines. Of course, the question of whether to add a semicolon to the end of a line is a philosophical proposition that you can decide for yourself. In this case, we will just follow the standard configuration of VUe-CLI.

This is crucial, assuming you have a bad, no longer bad, vue project with thousands of. Vue files, tens of thousands of formatting errors, all of which can be corrected with one line of yarn Lint!

Format it in vscode

That’s not the end of the story, we noticed that while the yarn lint command can format the code for us after we’ve written it, since we’re developing in vscode, we’d like to see errors marked directly in vscode.

In this case we need to install another plugin eslint in vscode.

Do you think installing the ESLint plugin is enough? No good. Since eslint doesn’t know that our.vue file contains js syntax, we also need to open our vscode setup file.

Note: this must be set in the project Settings, not just your own personal Settings, otherwise your team mates will arbitrarily change and mess up. The correct way to do this is to have a.vscode folder under your project folder, and one of vue’s pet peeves is that it will put this folder in.gitignore, which you will have to correct by deleting.vscode from the.gitignore file. Earnestly.

Add the following code to the settings.json file of your project:

{
  "eslint.autoFixOnSave": true."eslint.validate": [
    "javascript"."javascriptreact",
    {
      "language": "vue"."autoFix": true}}],Copy the code

At this point, all errors are flagged. Look to the left and make sure the settings.json file is green, not gray. If it is gray, check your.gitignore file:

Since we have autoFixOnSave in our settings.json file, no matter how messy the formatting is, if you press Ctrl+S to save, it will automatically format the code for you. Isn’t it convenient?

Prettier and Prettier

Sometimes we use prettier in vscode because not only do we do vue projects, but other types of js projects, especially traditional js projects, where prettier is used, Prettier does something that conflicts with ESLint. For example, prettier’s formatOnSave globally fights ESLint’s autoFixOnSave. We usually add a few more options to the settings.json file of this project, something like this:

  "editor.tabSize": 2."editor.formatOnSave": false."prettier.semi": false."prettier.singleQuote": true
Copy the code

With these Settings, Prettier basically doesn’t fight EsLint.

summary

Where vetur, ESLint, and Prettier are used, so we can always see the error when we use several tools together. Save automatic changes to correct past errors. I want every front-end engineer to write code like one hand, beautiful and clean.

Our goal remains the same: zero errors and zero warnings.