VS Code - Vue settings.json 配置

ESLint 规则配置

VS Code - ESLint 配置

VS Code 插件

• ESLint
• Vuter
• Prettier - Code formatter
• Prettier ESLint

settings.json 配置

{
    "workbench.iconTheme": "vscode-icons",

    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    },

    // "editor.defaultFormatter": "esbenp.prettier-vscode",

    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"        // "vscode.typescript-language-features"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"        // "vscode.html-language-features"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },

    "prettier": {
        "tabWidth": 4,         // == "prettier.tabWidth": 4,
        "printWidth": 120,
        "semi": true,
        "singleQuote": true,
        "arrowParens": "avoid"
    },

    "vetur.format.defaultFormatter.js": "prettier-eslint",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
        },
        "prettier": {
            "tabWidth": 4,
            "printWidth": 120,
            "semi": true,
            "singleQuote": true,
            "arrowParens": "avoid"
        }
    },

    // "html.format.indentInnerHtml": true,
    // "html.format.wrapAttributes": "force-aligned",

    // "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // "javascript.format.semicolons": "insert",

    "eslint.validate": ["javascript", "javascriptreact", "vue"]
}