vs code 配置 vue 开发

插件

安装 vetur、eslint、Prettier插件
插件是在 file-preference-extensions。每个插件都有丰富的描述，包括官网，可以很好地了解其使用。

prettier

https://blog.csdn.net/hbiao68/article/details/107176795/
在 vs code的插件说明里写了很多，包括与 esline的 fixAll可以一起工作，有哪些配置项，及访问官网得到其默认值
printWidth 默认是80
因为默认值有可能会变，所以对于一些比较重要的设置项，即使和默认值是一样，也应该显示设置（特别是项目的配置文件），以保证延续性

vetur

vetur 主要是语法高亮，及vue文件的格式化
vue文件包含了多个部分，如 <template>是html，<script>是js， <style>是css，vetur可以设置不同的格式化工具，vetur本身也内置了 prettier等格式化工具。
如果再装 prettier插件的话，vue 文件就不能格式化了，需要对文件类型指定 formatter。
在文件中右键，选择format document。如果右键选项出现 format document with…就证明有多个 formatter。点击就能查看有哪些formatter。
可惜只有一个formatter时，不知道如何看这个formatter是什么。
vetur 只格式化 vue文件，在装 prettier之前，原来 js 文件是由一个 TypeScript 的 formatter 进行格式化的。装了之后可以选择prettier

setting

settings的右上角的图标，点击打开 settings.json 文件

{
    "files.exclude": {
        "dist": true,
        "node_modules": true
    },
    "workbench.editor.enablePreview": false,
    "workbench.tree.indent": 18,
    
    // ***** prettier 设置
    "prettier.semi": true,  // true:为结尾增加分号
    "prettier.singleQuote": true, //使用单引号代替双引号
    "prettier.printWidth": 120,
    "prettier.tabWidth": 2,
    "prettier.arrowParens": "avoid", //只有一个参数的箭头函数的参数是否带圆括号。avoid表示可以不带

    // typescript设置。让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

    // vetur 只能format vue 文件。这里是对不同的代码片断设置不同的formatter。不设置默认是 prettier
    "vetur.completion.scaffoldSnippetSources": {}, // 去除图标
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        //并不能采用上面的 prettier配置，需重新配
        "prettier": {
            "printWidth": 120,
            "tabWidth": 2,
            "singleQuote": true,
            "semi": true,  
            "arrowParens": "avoid",
            "bracketSpacing": false, //大括号增加空格
          }
    },

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    
    //有多个 formatter时，需指定默认formatter，否则不会执行格式化
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
}