关于vue.js:前端开发vue技术栈程序员的vs-code插件分享

工欲善其事，必先利其器，想要达成高效的开发指标，怎么能短少了适合的编辑器插件呢。通过近期开发的几个我的项目，我养成了本人的开发习惯，这里就分享一些好用的 vs code 插件给大家。

第一款，Auto Rename Tag，这款插件能够在你扭转标签名称的时候主动重命名对称的标签。

第二款，Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code，名字尽管长，但其实是一个 vs code 汉化插件，对于英文苦手来说本地化的界面可能更好的上手。

第三款，code settings sync，这款插件能够通过 gitee 同步咱们的 vscode 配置，实用于那些常常在多台电脑之间切换应用或者常常重装系统的敌人，具体的配置办法能够参考，这里不做赘述。

第四款，ESLint，是一款赫赫有名的代码规范性检测插件，可能给你的代码规范性保驾护航，还能够依照我的项目外面.eslintrc.js 的配置来自定义检测形式。

第五款，Live Server，相似于 open in browser，能够将你的我的项目右键用浏览器关上，与 open in browser 不同的是，它是在本地启用一个服务器来运行你的我的项目，因而在你保留时能够实时预览，十分不便，毛病是敞开 vs code 之后网页也会生效，因为它是随着 vs code 外面的终端一起运行的。

第六款，One Dark Pro，本篇介绍中惟一一款非功能性插件，它是用来丑化编辑器外观的，应用前正文文本是有点儿晃眼的绿色，装上这款插件后正文文本变成了容易疏忽的浅灰色，各种标签和变量也有各自的色彩，不容易混同，同时它还集成了 Material Icon Theme 的性能，左侧文件列表中的不同文件也有了不同的图标，而这一款插件也有三种不同的对比度模式，装置插件后在插件的详情页面点击“设置色彩主题”即可抉择。

第七款，Prettier ESLint，这款插件能够依照 ESLint 的标准格式化代码，应用时须要在设置中编辑 settings.json 的 eslint.options 我的项目，具体的设置阐明稍后会在文末给出。

第八款，Settings Sync，与后面的 code settings sync 类似，欠缺了了 vs code 本身的同步性能，这款插件应用微软账户或者 github 账户来同步，因其同步应用的服务器地址不在国内，比拟适宜重度 github 用户来应用，具体的教程能够看这里 Settings Sync 应用教程，教程中有一点没提到的是生成 tokens 的时候记得把默认的 30days 改成 no expriation。

第九款，Vetur，能够用来提醒 vue 代码的高亮，同样相似的插件还有 Vue 3 Snippets，能够对 vue2 和 vue3 的代码进行主动补全，VueHelper，能够将 vue 编写的代码给出提醒，敌人们能够自行抉择，我本人是把三款插件全副都装置了，享受三倍的高兴~

最初，大家有什么比拟得心应手的插件也能够分享在评论区，文中有表述谬误或者有疑难的也能够提出来，不吝赐教。
附：自己 Prettier ESLint 设置代码如下

{
    "update.enableWindowsBackgroundUpdates": false,
    "update.mode": "none",
    "window.zoomLevel": 2,
    "workbench.colorTheme": "One Dark Pro",
    "sync.gist": "58510748d9d691bd67101073cf3e1064",
    "editor.formatOnSave": true,
    "diffEditor.ignoreTrimWhitespace": true,
    "javascript.format.enable": false,
    "typescript.format.enable": false,
    "vetur.format.enable": false,
    "eslint.enable": true,
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue",
            ".jsx",
            ".tsx"
        ]
    },
    "editor.codeActionsOnSave": {"source.fixAll.eslint": true}
}

应用办法为点击编辑器左下角齿轮按钮，抉择“设置”，点击右上角“关上设置（json）”图标，备份好本人的设置代码之后，将以上内容粘贴进 settings.json 设置文件即可。

因为 json 文件无奈增加正文，这里逐行解释下每行代码的意思：

{
// 窗口后盾更新
    "update.enableWindowsBackgroundUpdates": false,
//vscode 更新提醒 / 自动更新
    "update.mode": "none",
// 窗口缩放等级
    "window.zoomLevel": 2,
// 工作区主题配置
    "workbench.colorTheme": "One Dark Pro",
//code settings sync 插件的配置
    "sync.gist": "58510748d9d691bd67101073cf3e1064",
// 保留时主动格式化代码
    "editor.formatOnSave": true,
// 主动去除代码间空行
    "diffEditor.ignoreTrimWhitespace": true,
//js 文件的格式化
    "javascript.format.enable": false,
//ts 文件的格式化
    "typescript.format.enable": false,
//vetur 插件的配置
    "vetur.format.enable": false,
//eslint 插件的配置
    "eslint.enable": true,
//eslint 在每输出一个字符后检测是否有谬误 / 不标准
    "eslint.run": "onType",
//Prettier ESLint 插件的配置
    "eslint.options": {
// 主动格式化的文件类型
        "extensions": [
            ".js",
            ".vue",
            ".jsx",
            ".tsx"
        ]
    },
// 保留时主动依照 eslint 标准修复谬误 / 不标准
    "editor.codeActionsOnSave": {"source.fixAll.eslint": true}
}