VSCODE相关配置
中文设置
- 按快捷键“Ctrl+Shift+P”。
- 在“vscode”顶部会出现一个搜索框。
- 输入“configure language”,然后回车。
- “vscode”里面就会打开一个语言配置文件。
- 将“en-us”修改成“zh-cn”。
- 按“Ctrl+S”保存设置。
- 关闭“vscode”,再次打开就可以看到中文界面了。
如果你不愿意设置也没关系,可以在扩展中直接安装它的中文插件,还是很人性化的。
在这里插入图片描述
禁用自动更新
文件 > 首选项 > 设置(macOS:代码 > 首选项 > 设置,搜索update mode并将设置更改为none。
常用快捷键
这里我不得不说熟练使用常用快捷键可以大大提升我们的敲代码的工作效率,下面我给大家罗列一些可能比较常用的快捷键。
以下以Windows为主,windows的 Ctrl,mac下换成Command就行了;
对于行的操作快捷键:
- 重开一行:光标在行尾的话,回车就行,不在行尾,ctrl + enter 向下重开一行;ctrl + shift + enter 向上重开一行。
- 删除一行: 光标,没有选择内容是,ctrl + x 剪切一行(可达到删除效果), ctrl + shift + k 直接删除一行。
- 移动一下: alt + ↑ 向上移动一行;alt + ↓ 向下移动一行。
- 复制一行: shift + alt + ↓ 向下复制一行;shift + alt + ↑ 向上复制一行。
- ctrl + z 撤回/回退
对于词的操作:
- 选中一个词: ctrl + d
搜索或替换
- ctrl + f : 搜索
- ctrl + alt + f: 替换
- ctrl + shift + f:在项目内搜索
其他快捷键
- Ctrl+P 快速打开最近打开的文件
- Ctrl+Shift+N 打开新的编辑器窗口
- Ctrl+Shift+W 关闭编辑器
- Home 光标跳转到行头
- End 光标跳转到行尾
- Ctrl + Home 跳转到页头
- Ctrl + End 跳转到页尾
- Ctrl + Shift + [ 折叠区域代码
- Ctrl + Shift + ] 展开区域代码
- Ctrl + / 添加关闭行注释
- Shift + Alt +A 块区域注释
必备插件
1、View In Browser
在浏览器里预览网页必备。运行html文件
2、vscode-icons
改变编辑器里面的文件图标
3、Bracket Pair Colorizer
给嵌套的各种括号加上不同的颜色。
4、Auto Rename Tag
自动修改匹配的 HTML 标签。
5、Path Intellisense
智能路径提示,可以在你输入文件路径时智能提示。
6、Markdown Preview
实时预览 markdown。
7、stylelint
CSS / SCSS / Less 语法检查
8、Import Cost
引入包大小计算,对于项目打包后体积掌握很有帮助
其他插件
一些我觉得有用的插件:
1、Turbo Console Log
快捷添加 console.log,一键 注释 / 启用 / 删除 所有 console.log。(选中需要控制台打印的变量)
简单说下这个插件要用到的快捷键:
ctrl + alt + l 选中变量之后,使用这个快捷键生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log
2、CSS Peek
定位 CSS 类名。
3、Regex Previewer
实时预览正则表达式的效果。
目前就这么多快捷键和插件,以后发现实用的会再添加。