VSCode优化配置及插件推荐

编程如画,我是panda!

之前大家已经配置好了VSCode,这一期我就来推荐一下我一直在用的优化配置和插件

目录

前言

一、优化配置

1.字号设置

1.方法一

2.方法二 

2.自动添加括号

3.自动保存

4.formaton

 5.自动折行

二、插件推荐

1.One Dark Pro

2. Dracula Official

3.CodeSnap

​编辑 4.Image preview

5.Prettier - Code formatter 

6. Rainbow CSV

7.重磅级嘉宾!!!CodeGeeX

8.GitHub Copilot


前言

如果没有下载好VSCode,请参见我之前的博客:

vscode安装+汉化+配置C/C++环境(保姆级教程!)-优快云博客

VSCode配置python环境-优快云博客

后续还会继续更新......


一、优化配置

1.字号设置

因为刚下好的VSCode的字号默认为14,但是一般来说,在我们写代码的时候还是太小了,比较费眼,所以我们需要把字号调大一点,有两种方法。

1.方法一

直接找到左下角的设置图标,点击设置:

然后在“文本编辑器”下找到“字体”,将“Font Size”改成你需要的字体大小。

2.方法二 

因为每次调整字体大小都要去设置里面太麻烦,所以我们可以通过Ctrl+鼠标滚轮来调节字体大小,但是一开始你的VSCode并没有这个设置,你需要手动添加:
在上方设置字号的页面找到settings.json:

在最后一行加入如下代码:

"editor.mouseWheelZoom": true

但是切记,要在上一行加上逗号(英文输入法下!),即:

2.自动添加括号

往往我们在选择了VSCode提示的代码之后,不会自动添加括号,需要手动去添加:

更改如下:(还是settings,json文件,在最后一行添加代码)

"python.analysis.completeFunctionParens": true

仍然不要忘前一句末尾的逗号! 

3.自动保存

有时候我们常常写了代码但是忘了保存,导致自己又得重新写一遍代码,心态很炸裂有木有啊~所以需要自动保存来帮助我们,同样是在设置文件中加入:

"files.autoSave": "afterDelay",//自动保存文件

4.formaton

找到设置,搜索“formaton” ,下列三项打勾:能够帮我们美化代码

 5.自动折行

在settings.json文件中加入:

"editor.wordWrap": "on",

有些时候我们会将VSCode进行小窗缩放,所以自动折行很有必要,不然你都看不见你代码,还要拖动滑块。 

二、插件推荐

1.One Dark Pro

这是一款比较简约的主题插件,整体为深色,也是我一直在用的,比较推荐。

2. Dracula Official

同样是一款深色主题的插件,也是非常不错的,页面偏紫色一点。

 

3.CodeSnap

有时候我们需要把代码给别人展示,CodeSnap能够很美观的将代码截出来

右键空白区域,点击CodeSnap,选中你要截图的代码 

 4.Image preview

它能够预览我们插入的图像

5.Prettier - Code formatter 

这个工具可以在我们按下保存时自动调整代码格式,让代码变得美观

6. Rainbow CSV

这个插件能够让你在查看csv文件时清楚的知道某一列的标题对应某一列

7.重磅级嘉宾!!!CodeGeeX

这是一个超级有用的代码自动补全工具,重点是:免费!只要登录就能使用。

它能够自动预测你的代码要写什么,如果接受直接按下tab键即可

8.GitHub Copilot

还有一个代码自动补全工具,但是要收费,功能确实强大,收费也有收费的道理。 

### 配置 Vue 项目以优化 VSCode 开发体验 #### 安装 Vetur 插件 为了提高开发效率和改善编码体验,在 Visual Studio Code (VSCode) 中安装 Vetur 是必不可少的一步。Vetur 提供了对 `.vue` 文件的支持,包括语法高亮、Emmet 支持、智能感知等功能[^2]。 #### 设置 Vetur 配置项 通过 VSCode设置界面或直接编辑 `settings.json` 文件来进行个性化配置能够进一步增强工作效率。例如: ```json { "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatter.ts": "vscode-typescript", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_line_length": 100, "brace_style": "expand" } }, "editor.codeActionsOnSave": { "source.organizeImports": true, "source.fixAll.eslint": true } } ``` 这段 JSON 片段展示了如何指定默认格式化工具以及保存时自动执行的操作,比如整理导入语句和修复 ESLint 错误。 #### 调试支持 对于希望能够在 IDE 内部直接调试应用逻辑的情况而言,确保源映射(Source Map)被启用是非常重要的。如果使用的是较新的 Vue CLI,则可以在 `vue.config.js` 中添加如下配置来开启此特性;而对于旧版本如 Vue CLI 2 则需修改对应的 Webpack 配置文件中的 `devtool` 属性为 `'source-map'`[^3]。 ```javascript module.exports = { configureWebpack: { devtool: 'source-map' } }; ``` 上述措施有助于开发者更好地理解程序运行状态,并快速定位潜在问题所在。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值