VSCode习惯设置-效率提升

214 阅读1分钟

1. 自动保存

在commonly used标题下的auto save设置项推荐使用onFocusChange项,这样一来,在焦点改变时(如离开编辑器或转到其他文件)都会自动保存文件。

2. 自动换行

Word Wrap 选项 选择 on ,方便阅读

3. 保存时设置格式

Format On Save 选项 勾选 方便格式统一。

4. 使用代码格式化插件Prettier

将Prettier设置成默认格式化程序。在首选项中查找default formatter选项,选择Prettier, 并勾选format on save选项,使得代码在保存时及时进行格式化

同时,可以自定义prettier的格式化选项,例如默认情况下,其会自动把单引号变为双引号,如果我们想保留单引号,则可以创建一个文件,命名为.prettierrc并在里面输入

{
    "singleQuote": true
}

image.png 可以去Prettier上查看可配置的选项prettier.io

5. 配置用户片段,提升代码效率

在VSCode中找到user snippets配置项,新建一个全局配置文件,写入如下内容:

  "Print to console": {//用户片段名称
    "scope": "javascript,typescript", //生效范围
    "prefix": "cl", //触发关键词
    "body": ["console.log();"], //触发后自动生成的代码
    "description": "Log output to console" //该操作的描述

该用户片段的作用是,输入cl回车可自动生成console.log(),$1代表代码生成后光标所处位置

6. TODO Highlight插件 高亮文本

壳菜settings.json中配置想要的效果

7. live server自动更新页面

两种方式

  1. 可以装liver server 插件 ,点击编辑器右下角的 go live 即可开启网页,并实现自动更新页面
  2. node.js 安装live-server依赖包,安装完成后在终端输入live-server即可打开网页,并实现自动更新页面