vscode如何配置eslint+prettier來格式化Vue代碼

本篇文章給大家介紹一下vscode+eslint+prettier格式化vue代碼的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有所幫助。

vscode如何配置eslint+prettier來格式化Vue代碼

項目背景 : vue-cli?

先安裝好這三個插件,然后根據(jù)配置清單按需配置

  • ESlintJavaScript代碼檢測工具,可以配置每次保存時格式化JS,但每次保存只格式化一點點,你得連續(xù)按住Ctrl+S好幾次,才格式化好,自行體會~~

    立即學(xué)習(xí)前端免費學(xué)習(xí)筆記(深入)”;

  • vetur:可以格式化html、標準css(有分號 、大括號的那種)、標準js(有分號 、雙引號的那種)、vue文件,
    但是!格式化的標準js文件不符合ESlint規(guī)范,會給你加上雙引號、分號等,

  • Prettier – Code formatter:只關(guān)注格式化,并不具有eslint檢查語法等能力,只關(guān)心格式化文件(最大長度、混合標簽和空格、引用樣式等),包括JavaScript · Flow · typescript · CSS · scss · less · JSX · Vue · graphql · json · Markdown

【推薦學(xué)習(xí):《vscode》、《vscode》】

vscode json配置項?

{ ??//?git路徑 ??"git.path":?"D:/tool/Git/cmd/git.exe", ??"git.confirmSync":?false, ??//.vue文件template格式化支持,并使用js-beautify-html插件 ??"vetur.format.defaultFormatter.html":?"js-beautify-html", ??"vetur.format.defaultFormatterOptions":?{ ????//?對屬性進行換行。 ????//?-?auto:?僅在超出行長度時才對屬性進行換行。 ????//?-?force:?對除第一個屬性外的其他每個屬性進行換行。 ????//?-?force-aligned:?對除第一個屬性外的其他每個屬性進行換行,并保持對齊。 ????//?-?force-expand-multiline:?對每個屬性進行換行。 ????//?-?aligned-multiple:?當超出折行長度時,將屬性進行垂直對齊。 ????"js-beautify-html":?{ ??????"wrap_line_length":?120, ??????"wrap_attributes":?"auto", ??????"end_with_newline":?false ????}, ????"prettier":?{ ??????"semi":?false,?//不使用分號結(jié)尾 ??????"singleQuote":?true,?//使用單引號 ??????"eslintIntegration":?true??//開啟?eslint?支持 ????} ??}, ??//根據(jù)文件后綴名定義vue文件類型 ??"files.associations":?{ ????"*.vue":?"vue" ??}, ??//保存自動格式化 ??"editor.formatOnSave":?true, ??//配置?ESLint?檢查的文件類型 ??"eslint.validate":?[ ????"javascript", ????"javascriptreact", ????"vue-html", ????{ ??????"language":?"vue", ??????"autoFix":?true ????}, ????{ ??????"language":?"html", ??????"aotoFix":?true ????} ??], ??"eslint.run":?"onSave", ??//保存時eslint自動修復(fù)錯誤 ??"eslint.autoFixOnSave":?true, ??"files.autoSave":?"afterDelay" }

.eslinttrs.js 配置

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,?'1tbs',?{ ??????'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'] ??} }

更多編程相關(guān)知識,請訪問:vscode!!

以上就是

? 版權(quán)聲明
THE END
喜歡就支持一下吧
點贊6 分享