1. 确认编辑器版本
在进行vscode设置时,首先需要确认自己使用的编辑器版本。不同版本的vscode可能略有差异,因此需要选择对应版本的设置教程。关于版本号的查看可以从vscode帮助菜单中获得:
帮助 -> 关于 -> 版本号
2. 打开用户设置
在vscode中打开用户设置有两种方式。一种是通过命令面板搜索「Preferences: Open User Settings」并打开,另一种是通过菜单栏「文件」 -> 「首选项」 -> 「设置」打开。
2.1 修改设置排版
打开用户设置后,可以看到一个面板,分为默认设置和用户设置。默认设置列出了所有可用的设置选项,用户设置则是在默认设置上进行覆盖和扩展的地方。这里提供一个设置排版的示例:
"editor.tabSize": 2,
"editor.detectIndentation": true,
"editor.insertSpaces": true,
"editor.renderWhiteSpace": true,
"editor.renderControlCharacters": true
editor.tabSize控制缩进的宽度;editor.insertSpaces指定是否使用空格代替制表符;editor.detectIndentation指定是否根据文件自动检测缩进;editor.renderWhiteSpace和editor.renderControlCharacters则分别在编辑器中显示空格和控制字符。
2.2 修改主题和字体
vscode的主题和字体可以通过用户设置进行修改。
"workbench.colorTheme": "Monokai",
"editor.fontFamily": "Fira Code",
"editor.fontSize": 16
上面的示例将主题设置为Monokai,字体设置为Fira Code,字号设置为16。
3. 修改文件关联性
vscode会自动根据文件类型进行语法高亮和代码提示。但是在实际情况中,有些文件可能与默认关联有所不同。这时候可以通过用户设置进行修改。
3.1 关联文件
在用户设置中添加如下配置项可以将.coffee文件关联到javascript语言:
"files.associations": {
"*.coffee": "javascript"
}
3.2 取消关联
如果想要取消某些文件和默认关联,可以使用以下配置项:
"files.exclude": {
"**/*.js.map": true,
"**/.git": true
}
上述示例取消了所有.js.map文件和.git文件夹的默认关联。
4. 修改快捷键
默认情况下,vscode提供了很多快捷键以提高编辑效率。但是有些用户可能更习惯自己的快捷键习惯。在用户设置中可以修改或者添加新的快捷键。
4.1 修改快捷键
为了修改快捷键,需要定位到要修改的快捷键选项,然后点击修改按钮,添加新的按键组合即可。例如,假设要将复制的快捷键由「Ctrl+C」改为「Cmd+C」:
{
"key": "cmd+c",
"command": "editor.action.clipboardCopyAction",
"when": "editorTextFocus && !editorReadonly"
}
上述示例使用「key」键来指定新的组合键,然后使用「command」属性指定要执行的命令。
4.2 添加新的快捷键
可以添加一个新的快捷键,例如:为「Shift+Enter」创建一个新的命令,以在当前行下面插入一个空行:
{
"key": "shift+enter",
"command": "editor.action.insertLineAfter",
"when": "editorTextFocus"
}
5. 修改输出控制台设置
在vscode中,可以设置输出控制台的字体大小、字体类型、控制台背景颜色等相关设置。通过以下示例设置输出控制台样式:
"terminal.integrated.fontFamily": "Monaco",
"terminal.integrated.fontSize": 14,
"terminal.integrated.fontWeightBold": "normal",
"workbench.colorTheme": "Default Dark+",
"workbench.iconTheme": "material-icons",
"workbench.activityBar.visible": true,
"workbench.editor.showTabs": true
上述示例设置了字体、字号和字重,同时将代码区与工具区选中的工具图标类型和活动栏的可见性设置为了true。
6. 修改文件头
在要编辑的文档开头处添加一些注释信息是很常见的操作。在vscode中,可以通过修改文件头设置来实现自动添加文件头注释。
6.1 修改注释模板
在用户设置中添加如下示例来修改文件头注释模板:
"files.insertFinalNewline": true,
"files.insertBOM": false,
"files.encoding": "utf8",
"files.associations": {
"*.js": "javascriptreact"
},
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"node_modules": true
},
"files.autoSave": "off",
"files.defaultLanguage": "",
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true
},
"files.trimTrailingWhitespace": true,
"files.editor.insertSpaces": true
在具体的文件里面,会自动插入指定的文件头模板,根据下面的示例可以自动在文件头部插入该注释:
// =============== project_name ===============
// Created by author_name on date
// ============================================
console.log("this is an example");
6.2 修改注释信息
在项目中,文件头有时需要包含一些特定的注释信息,这时候可以修改文件头配置:
"files.defaultLanguage": "markdown",
"files.insertFinalNewline": true,
"files.insertBOM": true,
"files.encoding": "utf8",
"files.autoSave": "off",
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true
}
对于每个文件,会自动添加以下注释内容:
# project_title
## File description
### Author info
- Author username
- Link to your personal website
- Email address
总结
在vscode中进行设置可以有效提高编辑体验和工作效率。上述是一些常见的设置,可以根据自己的需要进行添加和修改。通过对vscode的一些基本设置进行合理调整,可以帮助我们更好的完成工作。