工欲善其事,必先利其器!
常见前端开发IDE:HBuilder(国产)、Sublime Text、WebStorm、Visual Studio Code
VS Code
官网:https://code.visualstudio.com/
免费的,直接下载;
下面根据常用的内容分为:设置部分、快捷键部分和插件部分;
设置部分
设置成中文
按快捷键“Ctrl+Shift+P”,顶部会出现一个搜索框。
输入“configure language”,然后回车,将“en-us”修改成“zh-cn”,没有的话,语言包会自动下载。
按“Ctrl+S”保存设置,重启。
扩展列表中,官方出品:
用户设置和工作区设置
VS Code 分用户设置和工作区设置两种;
“文件”->"首选项"->“设置”; 快捷键: Ctrl + ,
用户设置
这种方式进行的设置,会应用于该用户打开的所有工程;
根据个人偏好进行用户设置;
VS Code的设置文件为setting.json;
用户设置的文件保存在如下目录:
Windows: %APPDATA%\Code\User\settings.json
Linux: .config/Code/User/settings.json
使用习惯后,可以把自定义的 settings.json 同步到其他电脑上。
工作区设置
工作区是指使用VS Code打开的某个文件夹,在该文件夹下会创建一个名为.vscode的隐藏文件夹,里面包含着仅适用于当前目录的VS Code的设置,工作空间的设置会覆盖用户的设置。
多人协作时,项目会有编码规范,可对项目进行单独工作区的设置;
工作空间设置的文件保存在当前目录的.vscode文件夹下。
常用配置项
1)清除结尾空格
设置里,搜索
快捷键部分
1)格式化代码
提示:在结尾或开头使用。笔者更倾向于在处理完文件中的代码后使用。
在Windows系统:Shift键 + Alt键 + F键
在Mac系统:Shift键+ Option键 + F键
在Ubuntu系统:Ctrl键 + Shift键 + I键
2)代码折叠
有时,文件很大,想对代码全面了解,可以代码折叠。
1)在光标处折叠:可以连续按,就连续折叠;
在Windows系统或Ubuntu系统:Ctrl键 + Shift键 + [键
在Mac系统:Command键+ Option键 + [键
2)在光标处展开:
在Windows系统或Ubuntu系统:Ctrl键 + Shift键 + ]键
在Mac系统:Command键+ Option键 + ]键
3)清除结尾空格
清除结尾的多余空白,并帮助处理各种严格的Lints