统一前端代码风格

VSCode Vue项目配置指南

最新推荐文章于 2025-10-15 22:39:35 发布

原创最新推荐文章于 2025-10-15 22:39:35 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

66 篇文章

订阅专栏

本文详细介绍如何在VSCode中为Vue项目进行高效配置，包括设置自动格式化、自动保存、字体大小等编辑器参数，以及安装并配置Vetur、ESLint插件，确保代码质量和风格一致性。

首先设置vscode的setting.json

{
    "window.zoomLevel": 0,
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        {
            "language": "vue",
            "autoFix": true
        },
        "html",
        "vue"
    ],
    "editor.fontSize": 16,
    "editor.tabSize": 2,
    // #每次保存的时候自动格式化
    "editor.formatOnSave": true,
    "vetur.format.defaultFormatter.js": "prettier-eslint",
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            // Prettier option here
            "tabWidth": 2,
            "semi": false,
            "singleQuote": true
        }
    },
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "files.autoSave": "onFocusChange",
    "vetur.format.defaultFormatter.html": "prettier",
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    }
}

其次安装vetur,eslint插件