XFE 技术 生活 笔记 文集

VScode使用经验总结

🔖 开发工具 👀 325 🕒 2019-06-27 👨‍🎓 XFE/Peter

设置中,很多参数都是依赖于扩展的,故请先安装扩展再覆盖配置文件

划重点: 本文所涉及到的扩展及配置,纯属个人喜好决定,留以备用。若有第一次接触此编辑器的,不知道从何开始不妨按照本文步骤逐一配置,后期再根据个人喜好调整

代码片段

代码片段是一个用户可以自主编辑相关语言代码提示的功能,如下图这样,是提高我们编码效率的一个重要功能

使用方法

我们只需要编辑某种语言对应的代码片段文件,就能够在对应语言中使用我们自己创造的代码片段快速的打出对应的代码块了。

  • 选择用户代码片段菜单
  • 选择对应语言
  • 现在我们就开了对应语言的代码块配置文件了,
  • 将下面的代码示例赋值到 js 的代码块配置文件中, 就可以查看这个如图一的效果了。

代码示例

{
  // 下面是一个实例
 "create a function": {
  "prefix": "f",
  "body": [
      "function $1 ($2) {",
      "$3",
      "};"
  ],
  "description": "代码片段示例"
  }
}

我编写的代码块

ejs相关(ejs)

"ejs var": {
  "prefix": "ejs",
  "body": [
   "<%= $0 %>",
  ],
  "description": "ejs模板输出变量值"
 },
 "ejs code": {
  "prefix": "ejs",
  "body": [
   "<% $0 %>",
  ],
  "description": "ejs模板 逻辑代码"
 },
 "ejs include": {
  "prefix": "ejs",
  "body": [
   "<%- $0 %>",
  ],
  "description": "ejs模板 插入模板"
 }

experss相关(js)

// express 代码片段
 "express router get": {
  "prefix": "erg",
  "body": [
   "router.get('$1',(req,res,next) => {",
      "$2",
      "});"
  ],
  "description": "创建一个express get 路由"
  },
  "express router get async": {
  "prefix": "erg",
  "body": [
   "router.get('$1',async (req,res,next) => {",
      "$2",
      "});"
  ],
  "description": "创建一个express get 路由 并传入 async 函数 方便同步调用 promiese异步 函数"
  },
  "express router post": {
  "prefix": "erp",
  "body": [
   "router.post('$1',(req,res,next) => {",
      "$2",
      "});"
  ],
  "description": "创建一个express post 路由"
  },
  "express router post async": {
  "prefix": "erp",
  "body": [
   "router.post('$1',async (req,res,next) => {",
      "$2",
      "});"
  ],
  "description": "创建一个express post 路由 并传入 async 函数 方便同步调用 promiese异步 函数"
 }

性能优化建议

禁用当前无需使用的扩展

由于VSCode 会为每一个扩展开启一个后台进程,有些进程的计算资源占用是非常大的,故而,禁用一些当前无需使用的扩展非常有必要。可以提高计算机资源的有效利用率。当然全局禁用会比较麻烦。后期会拓展根据工作区禁用扩展的相关说明及经验。

举个例子说明下那些扩展为当前无需使用的扩展:

前端开发的时候

例如你只是开发一个静态网页,只需要用到内置的扩展,你的stylus 扩展, npm 扩展,java扩展,python 扩展都使用不到,那么上面提到的这些扩展是可以禁用的。

按照以上说的操作,你的cpu起码可以降低 10% 的占用率。

扩展

VSCode 之所以大货,社区供闲的无数扩展(插件) 是功不可没的。

我的扩展

前端

  1. Auto Close Tag

    自动闭合标签,当你在输入开始标签之后,插件会自动帮你添加结束的闭合标签。此扩展仅在HTML(或Vue 单文件组件)文件类型时方起作用

  2. Auto Remane Tag

    自动重命名成对标签,如果想替换某标签,只需要双击开始标签输入新标签名,结束标签自动跟随变动。此扩展仅在HTML(或Vue 单文件组件)文件类型时方起作用

  3. Beautify

    格式化文件,支持html、css、js(及其衍生或者扩展的文件,需要配置详情请见下文的设置)

  4. language-stylus

    stylus CSS预编译器语法高亮、语法提示

  5. vetur

    VueJS 单文件组件语法高亮,语法提示

  6. VueHelper

    Vue,Vue-router,Vuex代码块提示

  7. Art Template Helper

    一款js模板引擎的代码块、代码高亮插件

  8. EJS language support

    一款js模板引擎的代码块、代码高亮插件

主题、国际化

  1. Chinese (Simplified) Language Pack for Visual Studio Code

    简体中文语言包,汉化编辑器大部分地方,但不包括自行安装的第三方扩展(部分可能会汉化)

  2. One Dark Pro

    个人比较喜欢的一款颜色主题,包含主框架的配色,代码的配色等。主题包内置三种风格近似的配色,以满足不同的需要

  3. vscode-icons

    个人比较喜欢的文件图标主题。应用后悔改变资源侧边栏、顶部tab栏默认的文件图标。

工具

  1. amWikiForVSCode

可以让VSCode 变成一个 wiki 编辑器。生成后的wiki 可以发布到web容器或者 gitPages服务。通过js动态渲染,没做 SEO优化

  1. Code Runner

    会在代码编辑器右上角添加一个运行的三角符号,点击后自动根据代码类型启动对应的运行时来运行(运行时环境需要自己配置)

快捷键

我的快捷键配置


// 将按键绑定配置放入此文件中即可覆盖默认值
[
{
"key": "ctrl+shift+k",
"command": "editor.action.addSelectionToNextFindMatch",
"when": "editorFocus"
},
{
"key": "ctrl+d",
"command": "editor.action.deleteLines",
"when": "textInputFocus && !editorReadonly"
},
{
"key": "ctrl+alt+j",
"command": "editor.action.joinLines"
},
{
"key": "ctrl+k tab",
"command": "acceptSelectedSuggestion",
"when": "suggestWidgetVisible && textInputFocus"
},
{
"key": "ctrl+k tab",
"command": "insertSnippet",
"when": "editorTextFocus && hasSnippetCompletions && !editorTabMovesFocus && !inSnippetMode"
},
{
"key": "ctrl+k tab",
"command": "jumpToNextSnippetPlaceholder",
"when": "editorTextFocus && hasNextTabstop && inSnippetMode"
},
{
"key": "ctrl+k tab",
"command": "tab",
"when": "editorTextFocus && !editorReadonly && !editorTabMovesFocus"
},
{
"key": "ctrl+k tab",
"command": "insertNextSuggestion",
"when": "hasOtherSuggestions && textInputFocus && !inSnippetMode && !suggestWidgetVisible && config.editor.tabCompletion == 'on'"
},
{
"key": "ctrl+k tab",
"command": "insertBestCompletion",
"when": "atEndOfWord && !hasOtherSuggestions && !inSnippetMode && !suggestWidgetVisible && config.editor.tabCompletion == 'on'"
},
{
"key": "ctrl+shift+r r",
"command": "npm-script.rerun-last-script"
},
{
"key": "ctrl+r r",
"command": "-npm-script.rerun-last-script"
},
{
"key": "ctrl+shift+r shift+r",
"command": "npm-script.run"
},
{
"key": "ctrl+r shift+r",
"command": "-npm-script.run"
},
{
"key": "ctrl+shift+r t",
"command": "npm-script.test"
},
{
"key": "ctrl+r t",
"command": "-npm-script.test"
},
{
"key": "ctrl+shift+r l",
"command": "npm-script.showOutput"
},
{
"key": "ctrl+r l",
"command": "-npm-script.showOutput"
},
{
"key": "ctrl+shift+r shift+x",
"command": "npm-script.terminate-script"
},
{
"key": "ctrl+r shift+x",
"command": "-npm-script.terminate-script"
}
]

默认快捷键

官方文档

注:复制、剪切等操作,如果未选中任何字符则操作当前行,如果选中了任意字符则操作选中的字符

快捷键 操作
Ctrl+X 剪切
Ctrl+C 复制
Alt+Up 向上移动行
Alt+Down 向下移动行
Shift+Alt+Up 复制当前内容并在上一行粘贴
Shift+Alt+Down 复制当前内容并在下一行粘贴
Ctrl+K Ctrl+D
Ctrl+U
Shift+Alt+I
Ctrl+Shift+L
Ctrl+F2
Ctrl+I
Ctrl+Alt+Down
Ctrl+Alt+Up
Ctrl+Shift+\
Ctrl+]
Ctrl+[
Ctrl+End
End
Ctrl+Home
Ctrl+Down
Ctrl+Up
Alt+PageDown
Alt+PageUp
Ctrl+Shift+[
Ctrl+Shift+]
Ctrl+K Ctrl+[
Ctrl+K Ctrl+]
Ctrl+K Ctrl+0
Ctrl+K Ctrl+J
Ctrl+K Ctrl+C
Ctrl+K Ctrl+U
Ctrl+/
Shift+Alt+A
Ctrl+F
Ctrl+H
F3
Shift+F3
Alt+Enter
Alt+C
Alt+R
Alt+W
Ctrl+M
Alt+Z

设置

我的设置

{
  //编辑器字体大小
  "editor.fontSize": 16,
  //是否开启Git
  "git.enabled": false,
  //是否开启html格式化
  "html.format.enable": true,
  "telemetry.enableTelemetry": false,
  "telemetry.enableCrashReporter": false,
  "editor.detectIndentation": false,
  //侧边小地图导航
  "editor.minimap.enabled": true,
  //鼠标滚轮缩放
  "editor.mouseWheelZoom": true,
  "editor.renderIndentGuides": true,
  "window.menuBarVisibility": "default",
  //工作空间侧边栏位置
  "workbench.sideBar.location": "left",
  //vue单文件组件emmet配置
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html",
    "markdown": "html",
    "md": "html"
  },
  "workbench.iconTheme": "vscode-icons",
  "window.zoomLevel": 0,
  "editor.fontWeight": "600",
  "files.associations": {
    "*.wxss": "css"
  },
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
  "explorer.confirmDelete": false,
  "git.confirmSync": false,
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "explorer.confirmDragAndDrop": false,
  "workbench.activityBar.visible": true,
  "markdown.styles": [
    "file:///D:/markdown.css"
  ],
  "files.autoSave": "onFocusChange",
  "editor.cursorStyle": "line",
  "editor.cursorBlinking": "expand",
  "editor.cursorWidth": 2,
  "beautify.language": {
    "js": {
      "type": [
        "javascript",
        "json"
      ],
      "filename": [
        ".jshintrc",
        ".jsbeautify"
      ]
    },
    "css": [
      "css",
      "scss",
      "stylus"
    ],
    "html": [
      "htm",
      "html",
      "vue"
    ]
  },
  "editor.renderLineHighlight": "gutter",
  "editor.showFoldingControls": "always",
  "editor.suggestFontSize": 16,
  "editor.suggestLineHeight": 0,
  "vsicons.dontShowNewVersionMessage": true,
  "emmet.triggerExpansionOnTab": true,
  "workbench.colorTheme": "One Dark Pro Vivid",
"window.titleBarStyle": "custom",
"vetur.format.options.tabSize": 4,
"workbench.editor.tabSizing": "shrink"
}