vue在vscode的环境配置

最新推荐文章于 2025-07-17 14:30:47 发布

原创最新推荐文章于 2025-07-17 14:30:47 发布 · 901 阅读

2 ·

CC 4.0 BY-SA版权

VSCode 同时被 2 个专栏收录

2 篇文章

订阅专栏

Vue

1 篇文章

订阅专栏

本文详细介绍使用VSCode进行Vue项目高效开发的必备插件，包括Vetur、VueHelper等，以及settings.json的配置方法，涵盖代码规范、格式化、语法提示等功能，同时提供ESLint配置示例。

1. vscode基础开发插件

vetur vue必备
VueHelper vue及相关技术栈语法提示
Auto Close Tag 自动闭合标签
Auto Rename Tag 自动更改对应标签名
Prettier 代码格式化
ESLint 代码规范
JavaScript (ES6) code snippets javascript语法提示

2. 配置vscode settings.json

{
    // 基础设置
    "editor.tabSize": 2,
    "workbench.iconTheme": "vscode-icons",
    "workbench.startupEditor": "welcomePage",
    "editor.quickSuggestions": {
        "strings": true
    },
    
    // vue设置
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    "files.associations": {
        "*.vue": "vue"
    },
    
    // vetur设置
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    
    // eslint设置
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    
    // format设置
    "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.useTabs": true,
    
    // git设置
    "gitlens.advanced.messages": {
        "suppressCommitHasNoPreviousCommitWarning": false,
        "suppressCommitNotFoundWarning": false,
        "suppressFileNotUnderSourceControlWarning": false,
        "suppressGitVersionWarning": false,
        "suppressLineUncommittedWarning": false,
        "suppressNoRepositoryWarning": false,
        "suppressUpdateNotice": false,
        "suppressWelcomeNotice": true
    }
}

3. ESLint配置文件

module.exports = {
    root: true,
    parser: 'babel-eslint',
    parserOptions: {
        sourceType: 'module'
    },
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    extends: 'standard',
    // required to lint *.vue files
    plugins: [
        'html'
    ],
    // add your custom rules here
    'rules': {
        // allow paren-less arrow functions
        'arrow-parens': 0,
        // allow async-await
        'generator-star-spacing': 0,
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        'no-tabs': 0,
        'space-before-function-paren': 0
    }
}