First make sure VS Code is installed

Plugins used:

  • Vetur
    • provide.vueSyntax highlighting support for Vue. Js, a plugin designed by Pine Wu, a core member of the Vue.
  • ESLint
  • Prettier

Install Vetur

When we open the project with VS Code, the.vue file is gray because VS Code doesn’t have syntax highlighting for.vue files.

So we need to install the plugin Vetur to help us. Open the plugin market on the left.

Then search for “Vetur”, select it in the search results, and click “Install/Install”. Then click Reload/ Reload.

At this point, our.vue file will have syntax highlighting.

In addition, Vetur has some code snippets and we type the word “scaffold” into the.vue file and press Enter, which will automatically populate the file with a single file using the skeleton or scaffolding of the.vue component.

Install ESLint and Prettier

In the extended store, we’ll search for ESLint and proceed to install it. Prettier does the same thing. Once installed, we will reload VS Code.

Configuration ESLint

In the root directory of our project. Eslintrc. Js file, added: ‘the plugin: prettier/it’, this will enable prettier in ESLint support.

    module.exports = {
      root: true.env: {
        node: true
      },
      'extends': [
        'plugin:vue/essential'.'plugin:prettier/recommended'.// we added this line
        '@vue/prettier'].rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off'.'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
      },
      parserOptions: {
        parser: 'babel-eslint'}}Copy the code

Configuration is Prettier

We could also create a Prettier configuration file to add special Settings based on our personal style or the group’s preferences. Also create.prettierrc.js in the project root directory

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

The two Settings convert double quotes to single quotes and do not end with a semicolon.

User Settings

To further optimize the VS Code development experience, we added some configuration to the user Settings. Preferences >>> Settings >>> User Settings, go to settings.json file. First turn off linting for Vetur and add:

"vetur.validation.template": false
Copy the code

Now we want to tell ESLint which languages we want it to validate (vue, HTML and javascript) and set autoFix to true for each language:

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

Then, set ESLint autoFixOnSave.

"eslint.autoFixOnSave": true.Copy the code

And set our editor itself formatOnSave.

"editor.formatOnSave": true.Copy the code

At this point, our setup is almost complete, and when we save the file, we can format the code automatically.

More Settings

You can set VS Code to save automatically:

"files.autoSave": "onFocusChange", // Save when the editor loses focus, there are other options, please change according to your personal needsCopy the code

When generating a project using VUe-CLI select ESLint + Prettier to fit the above configuration

Install the CLI

To use the CLI, you need to have Node.js version 8 or later installed (8.10.0+ is recommended).

Run the following command on the terminal:

npm i -g @vue/cli
Copy the code

Create a VUE project

Run the following command on the terminal:

Vue create XXX // XXX indicates the project name, for example, vue-projectCopy the code

We will then be prompted to choose either default preset or manual selection. Using the down arrow key, we manually select the feature and press Enter.

Then, we’ll look at a series of functional options. Using the down arrow key, we will scroll down and use the space bar to select the desired function, then press Enter.

Linter/Formatter is code style. We’ll use ESLint + Prettier

We’ll add Lint’s additional functionality at save time.

We will select a separate configuration file.

We can choose whether to save all of these Settings and use them directly the next time we build the project. I don’t need it here. I’ll just choose N

If you want to save it, the Settings will be stored in the JSON file specified in the.vuerc user’s home directory.

Here we choose NPM as the package manager.

After the project is created, CD goes to the root directory of the project, for example, CD vue-project. Then run the command NPM run serve in the root directory to start the project. Then open the browser: localhost:8080 to see the initial project.