工欲善其事，必先利其器
作为一名前端工作者，编辑器或者IDE对于开发尤为重要，如何在1分钟内打造自己的开发环境呢
vscode
选择一个适合自己的编辑器或者IDE，vscode不多说，免费、丰富的插件与微软强硬的开发团体，以及快速的响应速度迅速获得了一大批用户，下面我们就介绍一下这款的插件与配置文件，手把手教你如何快速的配置出属于自己的编辑器
写这篇文章的时候使用的是最新版 1.37.1，可能后面的版本会集成某些插件的功能，这篇文章随时会更新哦
vscode插件
中文语言包 - Chinese (Simplified) Language Pack for Visual Studio Code
英文的菜单变成友好的中文，使得开发者更加了解自己的编辑器
主题 - One Dark pro
vscode上有很多主题，本人使用的是这块
image
其他：Material Theme
大家也可以根据自己的喜好到官方插件
成对括号不同颜色显示 - Bracket Pair Colorizer2
便于我们更好的梳理逻辑以及代码层次，另外vscode也会整理出一份js的大纲，可以帮助开发者更好的看清代码结构，尤其是在阅读别人的代码的时候
git增强 - gitlens
vscode本身会集成git，但是呢，总有一些体验不好的地方，这时候插件就可以派上用处了
代码中可以显示commit，体验更好的diff；另外，Git History也是值得推荐的，更加注重对比，但是本人觉得够用就好，如果说vscode本身git就已经满足了需求就没必要装很多雷同的插件了；还有git easy也是比较热的插件，大家可以去搜一下
快捷键 - Sublime Importer for VS Code
无缝切换自己熟悉的快捷键；也有其他的选择；或者自己去设置（比较费时）
HTML成对标签修改 - Auto Rename Tag
用了都说好，还有一个插件是
Auto Close Tag
自动闭合html标签，本人没有实际考证vscode本身是不是有这个功能，还是挺方便的
文件管理 - Project Manager
可以将自己平时经常用的项目快捷管理
注释 - koroFileHeader
文件头注释和函数注释；另外： Document This也值得推荐
代码格式化与美化
eslint: 代码检查
Vetur：格式化vue
Prettier ：格式化js/ts/css
不多说，后面会给出具体配置，不必烦恼
Visual Studio IntelliCode
官方的一个插件 ： 感知上下文
这个本人在写代码的时候并没有太多感受，具体应该是ai通过你写代码只能提示，这个有待观察其作用大小是否值得
下面重点来了，一分钟配置
同步配置 - Settings Sync
将你的插件配置和你编辑器个人配置同步到gist，便于不同电脑上快速配置，应该用不了几分钟哦，自动安装插件，完成之后重启即可，每个人值得拥有
通过这些插件，基本上就已经满足日常的需求，大家也可以把你的觉得好用，一些自己比较好的应用场景，评论出来，供大家学习使用，不必花费很长时间去配置与撸码无关的事情
配置拿走
{
"workbench.sideBar.location": "right",
"workbench.colorTheme": "One Dark Pro",
"workbench.iconTheme": "vscode-icons",
"editor.detectIndentation": false,
"editor.tabSize": 2,
"editor.lineHeight": 24,
"editor.fontSize": 18,
"editor.renderWhitespace": "all",
"editor.formatOnSave": true,
"editor.snippetSuggestions": "top",
// "editor.wordWrapColumn": 80,
"editor.wordWrap": "on",
"files.eol": "\n",
"sync.autoUpload": false,
"sync.removeExtensions": true,
"sync.quietSync": false,
"sync.autoDownload": false,
"sync.forceUpload": true,
"sync.gist": "xxxxxxxxxxxxxxxxxxxxxxxxxxx自己配置啊xxxxxxxxxxxxxxxxxxxxxxxx",
"fileheader.configObj": {
"autoAdd": false
},
"merge-conflict.autoNavigateNextConflict.enabled": true,
"typescript.updateImportsOnFileMove.enabled": "always",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.options.useTabs": true,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// "wrap_attributes": "auto",
}
},
"eslint.alwaysShowStatus": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
"prettier.eslintIntegration": true,
"prettier.printWidth": 100,
"prettier.singleQuote": true,
"path-intellisense.autoSlashAfterDirectory": true,
"path-intellisense.showHiddenFiles": true,
"path-intellisense.extensionOnImport": true,
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"git.enableSmartCommit": true,
"git.showPushSuccessNotification": true,
"emmet.showSuggestionsAsSnippets": true,
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html"
}
}
网友评论