preface

In the past, I was the only one writing the VUE project of the company, and the code style was uniform. However, with the increase of the team, the uniform code style became more and more important. My main tools are sublime, ws, vscode, which I rarely use (download, install and put aside), but when I heard that it was good for writing vue projects, I started a bit of a struggle. Of course tools, no one who is good who is bad ~~ do not blindly take sides, suitable for their own is the best.

Eslint validates code syntax, Prettier unifies formatting code, Saves automatically fixes Eslint errors, automatically formats code (because it’s lazy ~)

Install the vscode plug-in

Before installing Vetur, ESLint, and Prettier-code Formatter, restart the plugin to prevent it from taking effect.

There is also a catch: Beautify uses shortcuts for formatting code, so it conflicts with Prettier, so disable Beautify.

Vscode plug-in configuration

Open the VScode tool Settings (Ctrl +) and there are two Settings.

One is the USER SETTINGS, which is the global configuration, which is also applied to other projects.

The other option is WORKSPACE SETTINGS, which is the project configuration. Vscode /settings.json file will be created in the root path of the current project, and the configuration will only apply to the current project.

I wrote the configuration in the workspace Settings. The configuration is as follows:

{/ /. Vue file format template support, and use js - beautify - HTML plugin "vetur. Format. DefaultFormatter. HTML" : "Js - beautify - HTML / / js - beautify - HTML formatting configuration, attribute mandatory line" vetur. Format. DefaultFormatterOptions ": {" js - beautify - HTML: {"wrap_attributes": "force-aligned"}}, // Define vUE file types based on file suffixes. "files.associations": {"*.vue": "Vue"}, // configure the file type checked by ESLint. "eslint.validate": ["javascript", "javascriptreact", {"language": "vue", "autoFix": True}], // EsLint automatically fixes error "eslint.autoFixOnSave": true, // Save automatic formatting "editor.formatonSave ": true}Copy the code

Lint and Prettier conflict fix

Because prettier and ESLint need to be used together, some of Prettier’s rules might conflict with esLint’s. For example, prettier strings default to double quotes while ESLint defines single quotes so formatting would not comply with ESLint’s rules.

Prettier, ESLint, Prettier, ESLint, Prettier, ESLint, Prettier, ESLint, Prettier, ESLint, Prettier, ESLint, Prettier, ESLint, Prettier

.eslintrc.js

Use single quotation marks and no semicolon at the end of the configuration.

module.exports = {
  root: true.env: {
    node: true
  },
  extends: ['plugin:vue/essential'.'eslint:recommended'].rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off'.'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'.// Enforces single quotes
    quotes: ['error'.'single'].// Force no semicolon endings
    semi: ['error'.'never']},parserOptions: {
    parser: 'babel-eslint'}}Copy the code

.prettierrc

Use single quotation marks and no semicolon at the end of the configuration.

{
   // Enable ESLint support
  "eslintIntegration": true.// Use single quotes
  "singleQuote": true.// End without a semicolon
  "semi": false
}
Copy the code

You can also configure prettier directly in the vscode workspace

{/ / open eslint support "prettier. EslintIntegration" : true, / / using single quotes "prettier. SingleQuote" : true, / / the end do not add a semicolon "prettier. Semi" : false, }Copy the code

Results the preview

The last

Now I don’t have to look at someone else’s code mess anymore. For the first time with VScode, I referred to many articles of online bigshots, but I felt that there was something wrong with this configuration, but I still didn’t know where the problem was, warmly welcome everyone to exchange and give advice.