安装
- 官网：https://code.visualstudio.com/ 在首页选择相应的操作系统进行安装
image.png
插件
- 项目文件显示图标的常用插件 vscode-icons
安装方法：
快捷键 Ctrl+P ，输入ext install vscode-icons再回车，然后选择第一个点击【安装】按钮，待安装成功之后再点击【重新加载】按钮
手动配置：
27.gif
- 在浏览器中 预览/打开 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保存即可
image.png
自动补全文件路径
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
- 当前选中的代码片段向左/右缩进
# 向左
ctrl + [
# 向右
ctrl + ]
- 配合使用多行选择编辑器中的代码片段
# 方法1
ctrl + shift + alt + uparrow
ctrl + shift + alt + leftarrow
ctrl + shift + alt + downarrow
ctrl + shift + alt + rightarrow
# 方法2
alt + click （鼠标左键）
- 可以选中页面中相同的单词进行同时编辑
# 首先选中一些代码字符/单词再
ctrl + shift + L
- 向上/下复制当前行的代码
alt + shift + uparrow
alt + shift + downarrow
- 向上/下移动当前行的代码
alt + uparrow
alt + downarrow
- F2 重命名函数/类的名称，实现其他地方以及声明位置名称的同步更改
# 首先鼠标左键点中函数名称使光标在其上，再按 F2 ，最后编辑 + 回车即可
- 可以将一些逻辑代码封装出来
# 先用鼠标选中可复用的逻辑代码片段，之后在代码的前面会出现一个小灯泡，之后点击灯泡会出现三个选项
# 1. 提取为当前函数中的内部函数，实现函数内部的复用
# 2. 提取为全局的公用函数，实现全局都可复用
# 3. 提取为当前函数中的内部变量，实现函数内部的调/复用
- 代码格式化
# 自动格式化当前页面的所有代码
shift + alt + f
# 格式化选中的代码片段
ctrl + k ctrl + f
- 智能定位到语法错误代码的位置以及显示错误原因
F8
- 选中当前光标所在的完整单词
ctrl + d
- 快速复制当前行
alt + shift + up / down
- 选中当前光标所在的完整单词，并选中文件中其他相同的该单词
ctrl + f2
用户自定义设置
- 设置在保存文件时自动格式化代码
参考地址
顶部菜单 -> 文件 -> 首选项 -> 设置 -> 在右侧的【用户设置】中增加下面的规则即可
"editor.formatOnSave": true,
- 设置快捷键 -> 示例：大小写转换
vscode 设置快捷键.gif
- 配置
vetur插件的规则
// 配置 vetur 插件的规则：全局使用单引号 和 清除格式化时默认增加的分号和逗号
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"semi": false,
"trailingComma": "none"
}
},
- 全部的配置（留存使用）
{
"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
}
- 由于
prettier版本更新的缘故，导致上面在全局settings.json中的配置失效
参考文章：prettier格式化不生效 单引号无效
- 解决方法
我这里选择使用新建
.prettierrc文件的方式，具体位置是和.babelrc文件平级的，下面是具体的配置内容
{
"singleQuote": true,
"semi": false,
"trailingComma": "none"
}