Vue.js Workbox：您的终极Vue.js开发环境

Vue.js Workbox是一款专为Vue.js开发者打造的扩展包，集成了多款实用且流行的Vue.js扩展，旨在为您提供一个高效、便捷的开发环境。无论您是初学者还是经验丰富的开发者，这将是您在Vue.js开发过程中所需的最后一个扩展包。享受无缝的编码体验吧！

扩展包简介：

• Vetur：由vue-language-server提供支持的Vue工具，适用于VS Code。
• Vue Peek：增强Vue代码编辑，支持单文件组件（.vue文件）的组件和文件名跳转及查看定义功能。
• Auto Rename Tag：自动重命名配对的HTML/XML标签，类似于Visual Studio IDE的功能。
• Auto Close Tag：自动添加HTML/XML关闭标签，类似于Visual Studio IDE或Sublime Text的功能。
• npm：支持运行package.json文件中定义的npm脚本，并验证已安装模块与package.json中定义的依赖是否匹配。
• NPM IntelliSense：在import语句中自动完成npm模块。
• Prettier - Code formatter：使用Prettier格式化您的JavaScript/TypeScript/CSS代码。
• Sorting HTML and Jade attributes：按指定顺序对标签属性进行排序。
• Bracket Pair Colorizer：通过颜色识别匹配的括号，用户可以定义匹配的字符和使用颜色。
• Import Cost VSCode：在编辑器中显示引入包的大小，利用webpack和babili-webpack-plugin检测导入大小。
• ESLint：将ESLint集成到VS Code中，帮助您保持代码质量。
• GitLens：增强VS Code内置的Git功能，通过Git blame注释和代码镜头可视化代码作者身份，轻松导航和探索Git仓库。
• Highlight TODO, FIXME等注释：突出显示TODO、FIXME等注释，确保可维护性。
• vscode-icons：为您的文件夹/文件带来美观的图标。
• JavaScript (ES6) code snippets：包含ES6语法的JavaScript代码片段，支持Vue.js文件。

推荐工作区设置：

要充分利用这些扩展的功能，请将以下推荐设置粘贴到VS Code工作区设置中：

{
  "eslint.enable": true,
  "window.zoomLevel": 1,
  "files.trimTrailingWhitespace": true,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5",
  "prettier.eslintIntegration": true,
  "prettier.disableLanguages": [],
  "eslint.autoFixOnSave": true,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.detectIndentation": true,
  "editor.tabSize": 2,
  "editor.formatOnPaste": false,
  "editor.formatOnType": true,
  "editor.renderControlCharacters": true,
  "editor.renderWhitespace": "all",
  "files.exclude": {
    "**/node_modules": true,
    ".gitignore": true,
    ".eslintignore": true,
    ".eslintrc.js": false,
    ".babelrc": true,
    ".editorconfig": true,
    ".postcssrc.js": true,
    ".jshintrc": true,
    "build": true,
    "config": true
  },
  "eslint.validate": [
    {
      "autoFix": true,
      "language": "javascript"
    },
    {
      "autoFix": true,
      "language": "vue"
    }
  ],
  "attrsSorter.order": ["is", "v-for", "v-if", "v-else-if", "v-else", "v-show", "v-cloak", "v-once", "v-pre", "id", "ref", "key", "slot", "v-model", "v-model.", "v-bind", "v-bind.", ":. ", "v-text", "v-text.", "v-html", "v-html.", "class", "v-on.", "@. ", "name", "data-.", "ng-.", "src", "for", "type", "href", "values", "title", "alt", "role", "aria-.", "$unknown$"]
}

Todo扩展设置：

• todohighlight.isEnable：启用/禁用此扩展
  • 类型：布尔值
  • 默认值：true
• todohighlight.isCaseSensitive：关键字是否区分大小写
  • 类型：布尔值
  • 默认值：false
• todohighlight.toggleURI：如果输出通道中的文件URI不可点击，设置为true以在路径和行号之间切换URI模式
  • 类型：布尔值
  • 默认值：false
• todohighlight.keywords：将被高亮的注释，模式为普通字符串或转义的RegExp字符串，例如TODO:，\bTODO\b
  • 类型：Array
  • 默认值：["TODO", "FIXME", "XXX"]

致谢：

Vue.js Workbox的创建离不开上述提到的插件，感谢原作者和贡献者们的努力。

享受开发吧！

欢迎提交更新的拉取请求。