XFE 技术 生活 笔记 文集

VScode配置

🔖 开发工具 👀 51 🕒 2019-03-05 👨‍🎓 XFE/Peter

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

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

扩展列表

前端

  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",
"workbench.colorTheme": "One Monokai",
"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,
"editor.tabSize": 2,
"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
}