VS Code 寫vue推薦方式

推薦

VS Code(1.22.1) + vetur + eslint + stylelint + prettier

安裝

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"
}

工程跟目錄下配置

• .eslintrc.js
• .stylelintrc
• .prettierrc

截圖

自帶格式化以後：

連接

VS Code
vetur
eslint
stylelint
prettier