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"]
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容