前端vscode 环境初始化

无法格式化有很多种情况，多种因素造成，可能是setting.json 也可能是eslintrc.js 造成。

vscode 初始化记录

• Install ESLint VS Code extension
• Install Vue 2 Snippts VS Code extension
• Install eslint-plugin-html: npm install --save-dev eslint-plugin-html eslint-plugin-vue
• Add "plugins": ["vue","html"] to eslintrc config file as per eslint-plugin-html instructions. Vue extension is enabled by default for the plugin.
• Open VS Code user settings and add vue to eslint.validate:

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
],
复制代码

• Restart VS Code, eslint should now be displaying lint errors within <script> tags

setting.json 文件，按需删减

{
    "workbench.iconTheme": "vscode-icons",
    "window.zoomLevel": 0,
    "editor.renderWhitespace": "all",
    "editor.insertSpaces": true,
    "editor.tabSize": 4,
    "editor.trimAutoWhitespace": false,
    "explorer.confirmDragAndDrop": false,
    "editor.detectIndentation": false,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "html",
          "autoFix": true
        },
        {
          "language": "vue",
          "autoFix": true
        }
    ],
    "eslint.options": {
        "plugins": ["html","vue"]
    },
    "workbench.editor.enablePreviewFromQuickOpen": false,
    "explorer.confirmDelete": false,
    "editor.wordWrap": "on",
    "workbench.sideBar.location": "left",
    "extensions.ignoreRecommendations": true,
    "debug.inlineValues": true,
    "window.menuBarVisibility": "visible",
    "workbench.editor.enablePreview": false,
    "breadcrumbs.enabled": true,
    "workbench.statusBar.feedback.visible": false,
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "files.eol": "\r\n",
    "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
    "vetur.format.defaultFormatter.html": "none",
    "vetur.format.defaultFormatter.js": "none",
    "eslint.autoFixOnSave": true,
    "eslint.alwaysShowStatus": true,
    "eslint.enable": true,
    "files.autoSave": "off",
}

复制代码

autoFixOnSave 看是否需求自动格式化

eslintrc.js 按需复制

// http://eslint.org/docs/user-guide/configuring

module.exports = {
    root: true,
    // parser: "babel-eslint",
    "parserOptions": {
        "parser": "babel-eslint",
        "ecmaVersion": 2017,
        "sourceType": "module"
    },
    env: {
        browser: true,
    },
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    extends: ["standard", "eslint:recommended", "plugin:vue/essential"],
    // required to lint *.vue files
    plugins: [
        "vue"
    ],
    // add your custom rules here
    "rules": {
        //"off"或 0 -关闭规则
        //"warn" 或 1 - 开启规则, 使用警告 程序不会退出
        //"error"或 2 - 开启规则, 使用错误 程序退出
        "indent": [2, 4],
        //分号
        "eqeqeq": 0,
        "no-useless-escape": 0,
        "brace-style": 0,//大括号风格
        "curly": [2, "all"], //[2, "all"],//必须使用 if(){} 中的{}
        "no-new": 0,
        "no-return-assign": "warn",//return 语句中不能有赋值表达式

        "handle-callback-err": 0,
        "padded-blocks": 0,
        "no-duplicate-imports": 0,
        "operator-linebreak": 0,
        "no-extend-native": 0,
        "no-sequences": 0,

        "no-debugger": 0,
        "no-eval": 0,
        "comma-dangle": [2, "never"],
        "arrow-spacing": [2, { "before": true, "after": true }],
        "no-undef": 2,
        "no-console": 0,
        "space-before-function-paren": [2, "always"],
        "keyword-spacing": [2, { "before": true, "after": true }],
        "space-before-blocks": [2, "always"],
        "spaced-comment": [2, "always", {"exceptions": ['-', '+']}],
        "quotes": [2, "double"],
        "semi": [2, "never"],
        "no-multiple-empty-lines": [2, {"max": 1}],
        "generator-star-spacing": [2, { "before": true, "after": true }],
        "object-curly-newline": ["error", { "consistent": true, "minProperties": 2 }],
        "object-curly-spacing": [2, "always"],
        "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
        "linebreak-style": [2, "windows"],
		"eol-last": [2, "windows"],
        "object-property-newline": [2, {}],
        "space-infix-ops": 2,
        "vue/html-indent": [2, 4, {
            "attribute": 1,
            "baseIndent": 1,
            "closeBracket": 0,
            "alignAttributesVertically": true,
            "ignores": []
        }],
        "no-control-regex": 0
    },
    globals: {
        "_": true,
        "arguments": true,
        "ActiveXObject": true,
        "AndroidLogin": true
    }
}


复制代码

下面这段代码可解决template 无法格式化情况。 有些无用的可删除，按现有公司的规范来

        "vue/html-indent": [2, 4, {
            "attribute": 1,
            "baseIndent": 1,
            "closeBracket": 0,
            "alignAttributesVertically": true,
            "ignores": []
        }],
复制代码

常用插件

• Auto Rename Tag
• ESlint
• filesize
• Git History
• Vetur
• vscode-icons
• Vue 2 Snippets
• Quick Task