VS Code 写vue推荐方式

VSCode Vue开发配置

最新推荐文章于 2024-10-14 13:47:56 发布

转载最新推荐文章于 2024-10-14 13:47:56 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000014222435

文章标签：

#开发工具 #javascript #c# #ViewUI

本文介绍如何使用VSCode配合vetur、eslint、stylelint及prettier等工具进行高效的Vue项目开发，包括安装步骤和详细配置说明。

安装

npm install -g vue-language-server
npm install -g stylelint
npm install -g eslint
npm install -g prettier prettier-eslint

配置

VS Code 配置

{
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },

    "eslint.autoFixOnSave": true,
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        "vue-html",
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        }
    ],

    "stylelint.enable": true,
    "css.validate": false,
    "scss.validate": false,

    "stylelint.additionalDocumentSelectors": [
        "vue"
    ],

    "vetur.format.styleInitialIndent": true,
    "vetur.format.scriptInitialIndent": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html"
}

工程跟目录下配置