安装
- 官网：https://code.visualstudio.com/ 在首页选择相应的操作系统进行安装
插件
- 项目文件显示图标的常用插件 vscode-icons
安装方法：
快捷键 Ctrl+P ，输入ext install vscode-icons再回车，然后选择第一个点击【安装】按钮，待安装成功之后再点击【重新加载】按钮手动配置：
- 在浏览器中 预览/打开 html 文件的插件 — View In Browser
使用快捷键
ctrl+f1
- VSCode 中
Emmet的开启方法
Emmet 使用教程：https://www.w3cplus.com/tools/emmet-cheat-sheet.html
由于新版的 VSCode 默认是将其功能关闭的，需要手动的到
设置中去修改
- 修改方法:
先依次找到菜单：
文件 -> 首选项 -> 设置 -> 之后ctrl+f输入/复制emmet.triggerExpansionOnTab将找到的左侧(默认设置)的代码复制到右侧(用户设置)中去并将false改为true再按ctrl+s保存即可
- 自动补全文件路径
AutoFileName
- 适用于 VS Code 的中文（简体）语言包
Chinese (Simplified) Language Pack for Visual Studio Code
- 查看
Git控制版本的项目的历史提交信息Git History
- 控制
Git项目的拉取、提交等常用操作GitLens — Git supercharged
- 使编辑器识别
Stylus语法的扩展language-stylus
- 编辑器常用格式化各种语法的扩展
Prettier - Code formatter
- 使编辑器识别
Pug语法的扩展pug
- 控制
SVN项目的拉取、提交等常用操作SVN
- 与
Vue.js配套使用的 .vue文件编辑操作扩展Vetur`
- 基于
Vue.js使用的.vue文件快捷Codding操作扩展Vue VSCode Snippets
- 高亮显示项目中
TODO:的扩展TODO Highlight
常用快捷键
- 折叠/展开代码
```
折叠当前片段
ctrl + shift + [展开当前片段
ctrl + shift + ]折叠所有片段
ctrl + k ctrl + 0 （零）展开所有片段
ctrl + k ctrl + j
2. 当前选中的代码片段向左/右缩进
向左
ctrl + [
向右
ctrl + ]
3. 配合使用多行选择编辑器中的代码片段
方法1
ctrl + shift + alt + uparrow ctrl + shift + alt + leftarrow ctrl + shift + alt + downarrow ctrl + shift + alt + rightarrow
方法2
alt + click （鼠标左键）
4. 可以选中页面中相同的单词进行同时编辑
首先选中一些代码字符/单词再
ctrl + shift + L
5. 向上/下复制当前行的代码
alt + shift + uparrow alt + shift + downarrow
6. 向上/下移动当前行的代码
alt + uparrow alt + downarrow
7. F2 重命名函数/类的名称，实现其他地方以及声明位置名称的同步更改
首先鼠标左键点中函数名称使光标在其上，再按 F2 ，最后编辑 + 回车即可
8. 可以将一些逻辑代码封装出来
先用鼠标选中可复用的逻辑代码片段，之后在代码的前面会出现一个小灯泡，之后点击灯泡会出现三个选项
1. 提取为当前函数中的内部函数，实现函数内部的复用
2. 提取为全局的公用函数，实现全局都可复用
3. 提取为当前函数中的内部变量，实现函数内部的调/复用
9. 代码格式化
自动格式化当前页面的所有代码
shift + alt + f
格式化选中的代码片段
ctrl + k ctrl + f
10. 智能定位到语法错误代码的位置以及显示错误原因
F8
11. 选中当前光标所在的完整单词
ctrl + d
12. 快速复制当前行
alt + shift + up / down
13. 选中当前光标所在的完整单词，并选中文件中其他相同的该单词
ctrl + f2
## 用户自定义设置1. 设置在保存文件时自动格式化代码> [参考地址](https://blog.csdn.net/p358278505/article/details/68945589)<br />顶部菜单 -> 文件 -> 首选项 -> 设置 -> 在右侧的【用户设置】中增加下面的规则即可
“editor.formatOnSave”: true,
2. 设置快捷键 -> 示例：大小写转换> 3. 配置 `vetur` 插件的规则
// 配置 vetur 插件的规则：全局使用单引号 和 清除格式化时默认增加的分号和逗号 “vetur.format.defaultFormatterOptions”: { “prettier”: { “singleQuote”: true, “semi”: false, “trailingComma”: “none” } },
4. 全部的配置（留存使用）
{ “editor.fontFamily”: “Comic Sans MS”, “editor.fontSize”: 18, “editor.formatOnSave”: true, “team.showWelcomeMessage”: false, “files.autoSave”: “afterDelay”, “eslint.validate”: [ “javascript”, “javascriptreact”, “html”, { “language”: “vue”, “autoFix”: true } ], “eslint.options”: { “plugins”: [“html”] }, “diffEditor.ignoreTrimWhitespace”: false, “workbench.editor.showTabs”: false, “workbench.startupEditor”: “newUntitledFile”, “javascript.updateImportsOnFileMove.enabled”: “always”, “debug.node.autoAttach”: “off”, “git.autofetch”: true, “editor.tabSize”: 2, // 以下为stylus配置 “stylusSupremacy.insertColons”: false, // 是否插入冒号 “stylusSupremacy.insertSemicolons”: false, // 是否插入分号 “stylusSupremacy.insertBraces”: false, // 是否插入大括号 “stylusSupremacy.insertNewLineAroundImports”: false, // import之后是否换行 “stylusSupremacy.insertNewLineAroundBlocks”: false, “files.exclude”: { “/.classpath”: true, “/.project”: true, “/.settings”: true, “/.factorypath”: true }, // 两个选择器中是否换行 “java.home”: “D:\Program Files\Java\jdk”, “editor.suggestSelection”: “first”, “vsintellicode.modify.editor.suggestSelection”: “automaticallyOverrodeDefaultValue”, “[javascript]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “editor.quickSuggestions”: { “strings”: true }, “[json]”: { “editor.defaultFormatter”: “HookyQR.beautify” }, “[html]”: { “editor.defaultFormatter”: “HookyQR.beautify” }, “[css]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “workbench.iconTheme”: “vscode-icons”, “git.enableSmartCommit”: true, “svn.enableProposedApi”: “product”, “[scss]”: { “editor.defaultFormatter”: “HookyQR.beautify” }, “[vue]”: { “editor.defaultFormatter”: “octref.vetur” }, “[jsonc]”: { “editor.defaultFormatter”: “HookyQR.beautify” }, “prettier.useTabs”: true, “prettier.trailingComma”: “none”, “files.associations”: { “.cjson”: “jsonc”, “.wxss”: “css”, “*.wxs”: “javascript” }, “emmet.includeLanguages”: { “wxml”: “html” }, “minapp-vscode.disableAutoConfig”: true, “[less]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, // 配置 vetur 插件的规则：全局使用单引号 和 清除格式化时默认增加的分号和逗号 “vetur.format.defaultFormatterOptions”: { “prettier”: { “singleQuote”: true, “semi”: false, “trailingComma”: “none” } }, “git.confirmSync”: false, “vetur.grammar.customBlocks”: { “docs”: “md”, “i18n”: “json” }, “editor.codeActionsOnSave”: null, “prettier.semi”: false, “prettier.singleQuote”: true }
5. 由于 `prettier` 版本更新的缘故，导致上面在全局 `settings.json` 中的配置失效> [参考文章：prettier格式化不生效 单引号无效](b4e21bb45f8c691859bb6c466aff7460)- 解决方法> 我这里选择使用新建 `.prettierrc` 文件的方式，具体位置是和 `.babelrc` 文件平级的，下面是具体的配置内容
{ “singleQuote”: true, “semi”: false, “trailingComma”: “none” }
```
若有收获，就点个赞吧
0 人点赞
