The following is a list of comfortable configurations that can be used by individuals in real projects.

Eslint restricts coding rules and checks code for errors, while Prettier formats code.

The preparatory work

1. Vscode installs esLint, prettier, and vetur plugins
2. Select ESLint +Standard Config to customize the vuE-CLI build project
3. Code formatting tool uses Prettier
4. Modify vscode Prettier

I made the change in the workspace so that it does not affect other projects. After the change, a.vscode folder will be generated in the project root directory, as shown below:

Here is my configuration:

.vscode/settings.json:
{
    "prettier.arrowParens": "avoid",
    "prettier.printWidth": 100,
    "prettier.semi": false,
    "prettier.singleQuote": true,
    "prettier.trailingComma": "none",
    "prettier.useEditorConfig": false
}
Copy the code
5. Modify.eslintrc.js based on project requirements

The following is the detailed process for building a project using VUe-CLI

1. UseVue create XXX (project name)Create a project

2. Select Custom configuration

3. Select this option based on actual requirements

4. Do not use history mode

5. Select dart-sass

Dart-sass and Node-sass are both tools for compiling SASS into CSS.

The difference between
  • Node-sass is a compilation of sass using Node (calling libsass written by CPP);
  • Dart-sass uses the DRAT VM to compile SASS.
  • Node-sass is automatically compiled in real time. Dart-sass needs to be saved before it takes effect
  • Dart-sass is recommended for better performance (also officially used by SASS)

6. Code check tool I chose ESLint + Standard Config

7. Wait for the project initialization