Shulou(Shulou.com)06/02 Report--

This article is about how vscode configures eslint+prettier to format Vue code. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Project background: vue-cli

Install these three plug-ins first, and then configure them as needed according to the configuration list

ESlint:javascript code detection tool, you can configure each save to format js, but each save only a little bit, you have to press and hold Ctrl+S several times in a row before formatting, self-experience ~ ~

Vetur: you can format html, standard css (with semicolons and curly braces), standard js (with semicolons and double quotes), vue files

But! The formatted standard js file does not conform to the ESlint specification and will give you double quotes, semicolons, etc.

Prettier-Code formatter: only focus on formatting, do not have the ability to check syntax by eslint, and only care about format files (maximum length, mixed tags and spaces, reference styles, etc.), including JavaScript Flow TypeScript CSS SCSS Less JSX Vue GraphQL JSON Markdown

[recommended: "vscode tutorial", "vue.js tutorial"]

Vscode json configuration item

{/ / git path "git.path": "D:/tool/Git/cmd/git.exe", "git.confirmSync": false, / / .vue file template formatting support, and use the js-beautify-html plug-in "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions": {/ / a pair of attributes to wrap. / /-auto: the property wraps only when the line length is exceeded. / /-force: wraps every property except the first one. / /-force-aligned: wrap each property except the first one and keep it aligned. / /-force-expand-multiline: wrap each attribute. / /-aligned-multiple: when the length of a line break is exceeded, the attribute is vertically aligned. "js-beautify-html": {"wrap_line_length": 120," wrap_attributes ":" auto "," end_with_newline ": false}," prettier ": {" semi ": false, / / No semicolon ending" singleQuote ": true, / / use single quotation marks" eslintIntegration ": true / / enable eslint support} / / define vue file type "files.associations": {"* .vue": "vue"}, / / Save automatic formatting "editor.formatOnSave": true, / / configure the file type "eslint.validate" checked by ESLint: ["javascript", "javascriptreact", "vue-html", {"language": "vue", "autoFix": true} {"language": "html", "aotoFix": true}], "eslint.run": "onSave", / / eslint automatically fixes errors "eslint.autoFixOnSave": true, "files.autoSave": "afterDelay"} when saving

.eslinttrs.js configuration

Module.exports = {root: true, parserOptions: {parser: 'babel-eslint', sourceType:' module'}, env: {browser: true, node: true, es6: true,}, extends: ['plugin:vue/recommended',' eslint:recommended'] / / add your custom rules here / / it is base on https://github.com/vuejs/eslint-config-vue rules: {"vue/max-attributes-per-line": [2, {"singleline": 10, "multiline": {"max": 1, "allowFirstLine": false}}], "vue/singleline-html-element-content-newline": "off" "vue/multiline-html-element-content-newline": "off", "vue/name-property-casing": ["error", "PascalCase"], "vue/no-v-html": "off", 'accessor-pairs': 2,' arrow-spacing': [2, {'before': true,' after': true}], 'block-spacing': [2,' always'] 'brace-style': [2,' 1tbsfolk, {'allowSingleLine': true}],' camelcase': [0, {'properties':' always'}], 'comma-dangle': [2,' never'], 'comma-spacing': [2, {' before': false, 'after': true}],' comma-style': [2, 'last'] 'constructor-super': 2,' curly': [2, 'multi-line'],' dot-location': [2, 'property'],' eol-last': 2, 'eqeqeq': ["error", "always", {"null": "ignore"}],' generator-star-spacing': [2, {'before': true,' after': true}] 'handle-callback-err': [2,' ^ (err | error) $'], 'indent': [2, 2, {' SwitchCase': 1}], 'jsx-quotes': [2,' prefer-single'], 'key-spacing': [2, {' beforeColon': false, 'afterColon': true}],' keyword-spacing': [2, {'before': true] 'after': true}],' new-cap': [2, {'newIsCap': true,' capIsNew': false}], 'new-parens': 2,' no-array-constructor': 2, 'no-caller': 2,' no-console': 'off',' no-class-assign': 2, 'no-cond-assign': 2,' no-const-assign': 2 No-control-regex': 0, 'no-delete-var': 2,' no-dupe-args': 2, 'no-dupe-class-members': 2,' no-dupe-keys': 2, 'no-duplicate-case': 2,' no-empty-character-class': 2, 'no-empty-pattern': 2,' no-eval': 2, 'no-ex-assign': 2 'no-extend-native': 2,' no-extra-bind': 2, 'no-extra-boolean-cast': 2,' no-extra-parens': [2, 'functions'],' no-fallthrough': 2, 'no-floating-decimal': 2,' no-func-assign': 2, 'no-implied-eval': 2,' no-inner-declarations': [2, 'functions'] 'no-invalid-regexp': 2,' no-irregular-whitespace': 2, 'no-iterator': 2,' no-label-var': 2, 'no-labels': [2, {' allowLoop': false, 'allowSwitch': false}],' no-lone-blocks': 2, 'no-mixed-spaces-and-tabs': 2,' no-multi-spaces': 2 'no-multi-str': 2,' no-multiple-empty-lines': [2, {'max': 1}],' no-native-reassign': 2, 'no-negated-in-lhs': 2,' no-new-object': 2, 'no-new-require': 2,' no-new-symbol': 2, 'no-new-wrappers': 2,' no-obj-calls': 2 No-octal': 2, 'no-octal-escape': 2,' no-path-concat': 2, 'no-proto': 2,' no-redeclare': 2, 'no-regex-spaces': 2,' no-return-assign': [2, 'except-parens'],' no-self-assign': 2, 'no-self-compare': 2,' no-sequences': 2 No-shadow-restricted-names': 2, 'no-spaced-func': 2,' no-sparse-arrays': 2, 'no-this-before-super': 2,' no-throw-literal': 2, 'no-trailing-spaces': 2,' no-undef': 2, 'no-undef-init': 2,' no-unexpected-multiline': 2, 'no-unmodified-loop-condition': 2 'no-unneeded-ternary': [2, {' defaultAssignment': false}], 'no-unreachable': 2,' no-unsafe-finally': 2, 'no-unused-vars': [2, {' vars': 'all',' args': 'none'}],' no-useless-call': 2, 'no-useless-computed-key': 2 'no-useless-constructor': 2,' no-useless-escape': 0, 'no-whitespace-before-property': 2,' no-with': 2, 'one-var': [2, {' initialized': 'never'}],' operator-linebreak': [2, 'after', {' overrides': {'?': 'before' ':' before'}}], 'padded-blocks': [2,' never'], 'quotes': [2,' single', {'avoidEscape': true,' allowTemplateLiterals': true}], 'semi': [2,' never'], 'semi-spacing': [2, {' before': false, 'after': true}] 'space-before-blocks': [2,' always'], 'space-before-function-paren': [2,' never'], 'space-in-parens': [2,' never'], 'space-infix-ops': 2,' space-unary-ops': [2, {'words': true,' nonwords': false}], 'spaced-comment': [2,' always'] {'markers': [' global', 'globals',' eslint', 'eslint-disable',' * package','!,','}], 'template-curly-spacing': [2,' never'], 'use-isnan': 2,' valid-typeof': 2, 'wrap-iife': [2,' any'], 'yield-star-spacing': [2,' both'] 'yoda': [2,' never'], 'prefer-const': 2,' no-debugger': process.env.NODE_ENV = = 'production'? 2: 0,' object-curly-spacing': [2, 'always', {objectsInObjects: false}],' array-bracket-spacing': [2, 'never']} what is the use of vscode? Visual Studio Code is a run on OS X. Cross-platform editors on top of Windows and Linux for writing modern web and cloud applications provide developers with built-in support for a variety of programming languages, and as Microsoft pointed out in keynote at the Build conference, this editor also provides rich code completion and navigation capabilities for all of these languages.

Thank you for reading! This is the end of this article on "how to configure eslint+prettier to format Vue code in vscode". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.