visual studio code新手入门

本文分享了如何通过安装特定插件和进行简单设置来优化Visual Studio Code的使用体验,包括中文语言包、代码调试、格式化、智能感知等实用功能,以及如何使用Live Server快速预览HTML页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

基于一段时间的使用体验,给大家分享一下插件以及简单的设置,

第一步安装软件

安装visual studio code软件(直接复制链接https://code.visualstudio.com/下载安装即可);

推荐大家直接下载稳定版本的(蓝色的那个);

第二步:安装插件

1、必备插件:

(1)、Chinese (Simplified) Language Pack for Visual Studio Code(简体中文扩展包)

如果你的英文超级好请忽略;

(2)、live server(说简单点就是帮你打开浏览器的;下面有详解)

2、实用插件:

(1)、Debugger for Chrome(在Chrome浏览器或支持Chrome Debugger协议的任何其他目标中调试JavaScript代码)

(2)、JavaScript Snippet Pack(片段代码提示包)

(3)、Path Intellisense(路径智能感知;可自动填充文件名)

3、优化插件:

(1)、Beautify(代码格式化)

(2)、Bracket Pair Colorizer(多彩括号)

(3)、主题Material Theme;One Dark Pro;Shades of Purple(紫色);

(4)、vscode-icons(很漂亮实用的文件图标)

第三步:简单设置

1、切换主题:

按如下操作执行选择你喜欢的主题就可以啦

 

 

2、控制字体大小:

快捷键:ctrl+/ctrl-

3、控制折行方式:

 

live server详解:

(1)、在窗口的最底部有Go Live可以点击,点击之后,就会自动在浏览器中打开HTML文件

如果同样的位置你的显示的是这个

那就点击它切换回GO live再点击!!!

(2)、在HTML文件中右键,然后点击open live server

(3)、快捷键 :(alt+L+O) 打开服务;   (alt+L+C) 关闭服务

(4)、智能化浏览器(了解详情有链接:https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md)

按照上述步骤最后在工作区设置中添加代码:

{
"liveServer.settings.port":5500,
"liveServer.settings.root":"/src",
"liveServer.settings.CustomBrowser":"chrome",
"liveServer.settings.AdvanceCustomBrowserCmdLine":
"chrome--incognito--remote-debugging-port=9222",
"liveServer.settings.NoBrowser":false,
"liveServer.settings.ignoreFiles":[
".vscode/**",
"**/*.scss",
"**/*.sass",
"**/*.ts"
]
}

 

 

转载于:https://www.cnblogs.com/qingtiao/p/10261249.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值