如果你是一个热爱写代码的开发者或者学生,那么你一定有一个强烈的需要去寻找一个好看、好用的代码编辑器,那么,今天,我介绍一下vscode美化。
一、安装主题
第一步,你需要先在vscode内安装好自己喜欢的主题,例如Dracula主题,这需要你在左侧侧边栏内选择Extensions,然后搜索Dracula主题,点击安装即可。
下面是安装Dracula主题的代码示例:
在Extensions中搜索Dracula主题进行安装
安装好主题后,按下ctrl+P,在输入框中输入settings.json,这里是编辑器的设置选项,进去后在文件中加入以下配置:
"workbench.colorTheme": "Dracula",
这样就可以将编辑器的主题成功设置为Dracula了。当然,你也可以自己喜欢的其他主题。
二、安装插件
第二步,你需要安装一些插件,这里我推荐的是Prettier、Code Spell Checker、Auto-Open Markdown Preview和Bracket Pair Colorizer插件,这些插件都可以让你的代码变得更好看。
1、Prettier插件可以自动美化你的代码。
安装Prettier插件:在Extensions里面搜索Prettier,然后点击Install即可。
2、Code Spell Checker插件能够帮你检查拼写错误,使你的代码更优秀。
安装Code Spell Checker插件:在Extensions中搜索Code Spell Checker,然后点击Install按钮即可。
3、Auto-Open Markdown Preview插件可以让你即时预览你写的markdown文档。
安装Auto-Open Markdown Preview插件:在Extensions里面输入Auto-Open Markdown Preview,然后点击Install按钮即可。
4、Bracket Pair Colorizer插件可以让你的括号变色,是你更加容易理解代码。
安装Bracket Pair Colorizer插件:在Extensions里面输入Bracket Pair Colorizer,然后点击Install按钮即可。
三、使用插件
通过安装插件,我们可以让我们的开发效率变得更高。
1、使用Prettier插件,我们可以自动美化代码。
首先,你需要在你的项目根目录下创建一个.prettierrc的文件,然后在里面加入以下代码:
{
"semi": false,
"singleQuote": true
}
这样可以让自动美化代码时,采用单引号,并关闭分号。
使用Prettier插件的步骤如下:
步骤一:打开vscode的命令面板,点击ctrl+shift+p
步骤二:输入prettier,选择"Format Document with Prettier"选项
步骤三:等待自动美化完成即可
2、使用Code Spell Checker插件,我们可以检查我们的代码是否存在拼写错误。
使用Code Spell Checker插件,我们可以快速地检查代码中的写错单词,下面是使用方法:
步骤一:打开vscode的命令面板,点击ctrl+shift+p
步骤二:输入"Code Spell Checker",选择"Spell check all workspaces"选项
步骤三:等待快速检查完成即可
3、使用Bracket Pair Colorizer插件,我们可以让我们的括号变得更加明显。
Bracket Pair Colorizer插件无需设置,安装好后你就可以看到你的代码会被着色
4、使用Auto-Open Markdown Preview插件,我们可以即时看到我们的markdown文档。
使用Auto-Open Markdown Preview插件的步骤如下:
步骤一:打开命令面板,输入"Auto-Open Markdown Preview: Toggle",然后选择即时预览即可
四、总结
通过对以上的步骤和插件的介绍,相信你已经对如何美化你的代码有了一定的了解。 在实际的工作中,可以根据自己的喜好和需要去安装不同的插件,不断地调整自己的开发环境,提高效率。