VsCode 配置

Vue3 开发配置

插件安装

• johnsoncodehk.volar
• johnsoncodehk.vscode-typescript-vue-plugin
• dbaeumer.vscode-eslint
• maggie.eslint-rules-zh-plugin
• esbenp.prettier-vscode
• usernamehw.errorlens
• christian-kohler.path-intellisense

禁用

• octref.vetur

prettier 配置

配置参考1

module.exports = {
  printWidth: 80, // 每行代码长度（默认80）
  tabWidth: 2, // 每个tab相当于多少个空格（默认2）
  useTabs: false, // 是否使用tab进行缩进（默认false）
  singleQuote: false, // 使用单引号（默认false）
  semi: true, // 声明结尾使用分号(默认true)
  trailingComma: 'es5', // 多行使用拖尾逗号（默认none）
  bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
  jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
  arrowParens: "avoid", // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
};

参考：https://github.com/nabaonan/todos-action

配置参考2

{
    //使用tab缩进，默认false
    "useTabs": false,
    // tab缩进大小,默认为2
    "tabWidth": 2,
    // 换行长度，默认80
    "printWidth": 120,
    // 字符串使用单引号
    "singleQuote": true,
    // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    "trailingComma": "none",
    // 对象中打印空格 默认true
    // true: { foo: bar }
    // false: {foo: bar}
    "bracketSpacing": true,
     // 每行末尾自动添加分号;false->不添加
    "semi": false,
     //解决格式化插件Prettier，格式化操作后，结束标签＞跑到下一行的问题
    "htmlWhitespaceSensitivity": "ignore"
}

作者：kuanghua
链接：https://juejin.cn/post/7041871529809805343
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

配置参考3

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": false,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

自定义配置：自定义配置 (opens new window)