VsCode uses ESLint+Prettier to unify the front-end code style

In writing vUE projects, a uniform code style is becoming more and more important, but it is hard to tell who is right and who is wrong about code style, different people have different preferences, and the only way to avoid debate is to mandate it. So there are two basic principles that teams must follow when it comes to code style:

  1. The minority is subordinate to the majority;
  2. Use tools to unify styles.

Prettier uses Eslint to validate code syntax, prettier formats code, press Save automatically fixes Eslint errors, automatically formats code (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 and configure them in settings.json

Configuration is as follows

"search.followSymlinks": false, "search.useIgnoreFiles": false, "guides.enabled": false, "editor.tabSize": 2, "git.confirmSync": false, "window.zoomLevel": 0, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "editor.minimap.enabled": true, "editor.minimap.renderCharacters": false, "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", "editor.codeLens": True, // Configure file associations so that the corresponding prompt "files.associations": {"*.vue": "vue", "*.wxss": "CSS"}, / / configuration emmet whether to enable the TAB launches the abbreviation "emmet. TriggerExpansionOnTab" : true, / / configuration emmet's support for the file type "emmet. SyntaxProfiles" : {"javascript": "JSX ", "vue":" HTML ", "vuE-html ":" HTML "}, // Whether to enable eslint detection "eslint.enable": "Eslint. autoFixOnSave": true, // eslint configuration file "eslint.options": {"extensions": [".js", ".vue"]}, // esLint recognizes file suffixes "eslint.validate": [" javascript", {"language": "vue", "autoFix": true }, "html", "vue" ], "search.exclude": { "**/node_modules": true, "**/bower_components": true, "**/dist": 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

/ / format (the default) : Shift + Alt + F / / prettier when formatting, open eslint support "prettier. EslintIntegration" : True, / / whether or not to use single quotes "prettier. SingleQuote" : true, / / js - beautify - HTML formatting configuration, attribute mandatory line "vetur. Format. DefaultFormatterOptions" : { "prettier": { "semi": false, "singleQuote": true }, "js-beautify-html": { "wrap_attributes": "force-aligned" } }, "prettier.singleQuote": true, "prettier.semi": false, "javascript.format.insertSpaceBeforeFunctionParenthesis": true, "vetur.format.defaultFormatter.js": "vscode-typescript", "leetcode.endpoint": "leetcode-cn", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }Copy the code

Results the preview

No semicolons at the end.

The last

Referred to the article of a lot of big guy on the net, but feel this configuration seems to be poor where, but do not know where the problem is from beginning to end, warmly welcome everyone to exchange advice.