一、安装插件 eslint 与 prettier 、beautify
二、文件=》首选项=》设置=》输入beautify=》在settingjson中设置如下代码：
{ // "editor.fontFamily": "'monaco','Roboto Mono'", // "terminal.integrated.fontFamily": "monaco", "editor.fontSize": 16, "editor.fontWeight": "400", "editor.fontLigatures": true, "workbench.colorTheme": "Monokai", "editor.lineHeight": 24, "workbench.editorAssociations": { "*.ipynb": "jupyter-notebook" }, "jupyter.alwaysTrustNotebooks": true, "terminal.integrated.fontSize": 13, "eslint.format.enable": true, "editor.formatOnSave": true, "editor.formatOnType": true, "html.format.unformatted": "", "eslint.alwaysShowStatus": true, "eslint.codeAction.showDocumentation": { "enable": true }, "eslint.validate": [ "javascript", { "language": "vue", "autoFix": true }, "html", "vue" ], "javascript.updateImportsOnFileMove.enabled": "always", "[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, "[vue]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, "terminal.integrated.inheritEnv": false, "liveServer.settings.donotShowInfoMsg": true, "liveServer.settings.donotVerifyTags": true, "fileheader.configObj": { "Author": "xingwujie", "createFileTime": true, "language": { "languagetest": { "head": "/$$", "middle": " $ @", "end": " $/" } }, "autoAdd": true, "autoAddLine": 100, "autoAlready": true, "annotationStr": { "head": "/*", "middle": " * @", "end": " */", "use": false }, "headInsertLine": { "php": 2, "sh": 2 }, "beforeAnnotation": { "文件后缀": "该文件后缀的头部注释之前添加某些内容" }, "afterAnnotation": { "文件后缀": "该文件后缀的头部注释之后添加某些内容" }, "specialOptions": { "特殊字段": "自定义比如LastEditTime/LastEditors" }, "switch": { "newlineAddAnnotation": true }, "supportAutoLanguage": [], "prohibitAutoAdd": [ "json" ], "folderBlacklist": [ "node_modules", "文件夹禁止自动添加头部注释" ], "prohibitItemAutoAdd": [ "项目的全称, 整个项目禁止自动添加头部注释, 可以使用快捷键添加" ], "moveCursor": true, "dateFormat": "YYYY-MM-DD HH:mm:ss", "atSymbol": [ "@", "@" ], "atSymbolObj": { "文件后缀": [ "头部注释@符号", "函数注释@符号" ] }, "colon": [ ": ", ": " ], "colonObj": { "文件后缀": [ "头部注释冒号", "函数注释冒号" ] }, "filePathColon": "路径分隔符替换", "showErrorMessage": false, "writeLog": false, "wideSame": false, "wideNum": 13, "functionWideNum": 0, "CheckFileChange": false, "createHeader": true, "useWorker": false, "designAddHead": false, "headDesignName": "random", "headDesign": false, "cursorModeInternal": false, "openFunctionParamsCheck": true, "functionParamsShape": "normal", "functionBlankSpace": 0 }, "fileheader.cursorMode": { "Author": "dingguowei", }, "fileheader.customMade": { "Author": "ding", "Date": "Do not edit", "LastEditors": "ding", "LastEditTime": "Do not edit" }, "editor.rulers": [], "winopacity.opacity": 255, "window.zoomLevel": 3, "vetur.format.defaultFormatter.html": "js-beautify-html", "vscode-edge-devtools.mirrorEdits": true, }
三、配置.eslint.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'] } }
