VScode + Vetur + ESLint 代码格式化

415 阅读1分钟

1、安装Vetur和ESLint,重启VScode 2、文件>首选项>设置>打开设置json,粘贴

{
    // vscode默认启用了根据文件类型自动设置tabsize的选项

    "editor.detectIndentation"false,

    // 重新设定tabsize

    "editor.tabSize"4,

    // #每次保存的时候自动格式化

    "editor.formatOnSave"true,

    "eslint.validate": [

        "javascript",

        "javascriptreact",

        "html",

        "vue"

    ],

    // #每次保存的时候将代码按eslint格式进行修复

    "editor.codeActionsOnSave": {

        "source.fixAll.eslint"true

    },

    //  #让prettier使用eslint的代码格式进行校验

    "prettier.eslintIntegration"true,

    //  #去掉代码结尾的分号

    "prettier.semi"false,

    //  #使用带引号替代双引号

    "prettier.singleQuote"true,

    //  #让函数(名)和后面的括号之间加个空格

    "javascript.format.insertSpaceBeforeFunctionParenthesis"true,

    // #让vue中的js按编辑器自带的ts格式进行格式化

    "vetur.format.defaultFormatter.js""vscode-typescript",

    "vetur.format.defaultFormatterOptions": {

        "js-beautify-html": {

            "wrap_attributes""force-aligned"

            // #vue组件中html代码格式化样式

        },

        "prettier": {

            // 格式化不加分号

            "semi"false,

            // 格式化为单引号

            "singleQuote"true,

            // 格式化去除尾部逗号

            "trailingComma""none"

        }

    },

    "window.zoomLevel"0,

    "explorer.confirmDelete"false,

    "explorer.confirmDragAndDrop"false,

    "editor.renderControlCharacters"true,

    "editor.renderWhitespace""all"
}