cmatrixprobe

发呆业务爱好者

Go+Vue | vscode扩展和配置

本着不能一直用教育邮箱白嫖JetBrains全家桶的心态,将主力IDE开发工具切换到vscode也有几个月了,发现配置上还是有挺多坑的,第三方插件质量也参差不齐,写Go相比Goland体验差很多。当然vscode的优点也挺多,免费、颜值高、快捷键易用,写写前端很舒服,还有洁癖福音禅模式(Ctrl+K Z),下面就简单分享一下自己在用的扩展和配置。

onedarkpro

扩展

以下扩展均来自于官方应用商店(Ctrl+Shift+X),直接搜索即可。

1.Code Runner
一款强大的代码运行插件,支持几十种语言一键运行。
可以选中一块代码片段,Ctrl+Alt+J选择语言运行,或者直接Ctrl+Alt+N运行单个文件。

2.Docker
0202年了docker应该属于必备技能,用来查看inspect或者创建dockerfile挺方便的。

3.One Dark Pro
一款深受好评的暗色系主题。

4.vscode-icons
图标插件。

5.Auto Rename Tag
修改标签的时候自动修改另一半,支持html、xml等格式。

6.Eslint
前端代码规范,应该是必装的插件吧,需要注意的是最新的2.0版本配置有了很大的改变,一些设置已经被废弃了,比如eslint.validate。

7.Prettier
配合Eslint进行代码检查和自动修复,自有一套“美”的规范,可以用一些额外插件支持eslint配置

8.language-stylus
用于支持stylus——一款css预处理器。

9.Image preview
把前端的图片放在代码行号旁边预显示。

10.open in browser
html静态页面预览,快捷键Alt+B。

11.Polacode-2019
代码截图,Ctrl+Shift+P直接搜索调出,选中代码即可,比自己用其他工具截的好看。

12.Markdown All in One
写markdown用的插件,Ctrl+K V分屏同步显示,没错,我的博客都是用它写的。

13.Leetcode
emmm,刷题用的,还不错,可以直接把题目和模板拉下来直接提交,目前还不支持第三方的题,比如剑指Offer系列。

14.Remote-SSH
一款官方插件,可以直接连到服务器改代码,目前用的机会不多。

15.Vetur
Vue开发必备,包括代码补全等一系列功能。不支持代码格式化,但可以指定格式化的风格。
需要通过"editor.defaultFormatter": "octref.vetur"将Vue默认的Formatter强制指定为vetur,然后vetur.format.defaultFormatter可以分别指定template、script、style。

16.Go
Go开发必备。

17.TabNine
基于GPT-2模型训练的代码补全功能,支持各种主流编程语言。顾名思义通过Tab键位补全,所以要通过"editor.acceptSuggestionOnEnter": "off"禁用Enter补全。

18.Settings Sync
私以为最强的vscode插件,可以将所有配置和插件同步到Github,随便换台机器几分钟就能搭一个一模一样的环境出来,据说该功能马上要被官方支持了。

19.GitLens
阅读源码神器,可以轻松地查看提交信息。

20.Git History
顾名思义,将版本库提交历史图形化显示,配合GitLens使用。

21.advanced-new-file
可以用快捷键新建文件并指定路径和名称,默认快捷键Ctrl+Alt+N。


配置

所有配置在ui和json两种方式编辑(Ctrl+Shift+P 搜索settings)下都是同步的,其中默认设置是只读的,方便我们配置的时候进行对比,默认的配置就不需要在自定义json里重新配置了。

{
    // 样式
    "workbench.iconTheme": "vscode-icons", // 图标
    "workbench.colorTheme": "One Dark Pro", // 主题
    // 全局设置
    "files.autoSave": "afterDelay", // 自动保存类型
    "files.autoSaveDelay": 500, // ...ms延迟后自动保存
    "editor.fontSize": 18, // 字号
    "editor.tabSize": 2, // 默认缩进为2
    "editor.formatOnSave": true, // 保存时格式化
    "editor.fontFamily": "Fira Code", // 字体
    "editor.fontLigatures": true, // 开启字体连字
    "editor.trimAutoWhitespace": true, // 自动删除行尾空白符号
    "editor.snippetSuggestions": "top", // 将自定义的snippet在提示中置顶
    "editor.quickSuggestions": {
        "other": true,
        "strings": true,
        "comments": false, // 仅注释中不启用代码补全提示
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true, // 保存时eslint修复
    },
    "zenMode.hideLineNumbers": false, // zenMode_禅模式下显示行号
    // window
    "window.titleBarStyle": "custom", // 窗口标题栏windows风格
    // debug
    "debug.toolBarLocation": "docked", // 固定debug窗口位置
    // eslint
    "eslint.format.enable": true, // eslint_格式化
    // vue
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur", // 设置vetur格式化vue
    },
    "vetur.format.defaultFormatter.js": "none", //vetur_不格式化js(使用eslint的格式化)
    "vetur.format.defaultFormatter.stylus": "none", //vetur_不格式化stylus
    // golang
    "go.docsTool": "gogetdoc", // go_检索源代码
    "go.formatTool": "goimports", // go_格式化工具
    "go.lintOnSave": "off", // go_取消保存时自动lint
    "go.useLanguageServer": true, // go_启用go modules
    "go.languageServerFlags": [
        "serve",
        "-rpc.trace",
        "--debug=localhost:6060"
    ],
    "[go]": {
        "editor.tabSize": 4 // go_缩进为4
    },
    // leetcode
    "leetcode.endpoint": "leetcode-cn", // leetcode_源设为中文官网
    "leetcode.workspaceFolder": "/home/lsh/go/src/leetcode/problems", // leetcode_工作区目录
    "leetcode.defaultLanguage": "golang", // leetcode_编程语言
    // emmet
    "emmet.triggerExpansionOnTab": true, // emmet_tab键展开emmet缩写
    "emmet.showSuggestionsAsSnippets": true, // emmet_显式弹出语法展开提示
    "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly", // emmet_只显示标记语言和样式表的展开提示
    // sync
    "sync.gist": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", //sync_vscode配置同步Gist ID
    "sync.removeExtensions": false, //sync_取消自动移除扩展
    "sync.autoUpload": true, //sync_vscode自动上传配置
    "sync.autoDownload": true, //sync_vscode自动下载配置
    // 其他插件相关
    "code-runner.runInTerminal": true, // code-runner_在终端中运行code runner
    "open-in-browser.default": "chrome",
}

写在最后

作为一个开源免费项目,vscode做的足够优秀,虽然牺牲了一部分性能,但正因如此,广大的第三方插件开发者给造就了它今天的地位。关于快捷键的使用相关官方文档介绍的十分详细,这里就不再介绍了。

Linux环境下Vue CLI多版本共存

上一篇

Goroutine调度(本地执行队列顺序)

下一篇
评论
头像 发表评论 说点什么
还没有评论
1179
0