前言
工欲善其事,必先利其器。作为程序员的俺们,有一款适合自己的编辑器当然是非常好的一件事啦!!!前端开发经常使用的编辑器有
sublime
,webstorm
,atom
等等等。看的我都眼花缭乱了,这些编辑器各自有自己的优点与缺点,怎么选择还得看自己的实际需求。
软件下载安装,编辑器对比。
颜值(主题)
写代码的时候有一个好看的主题,就像家里有一个漂亮的女盆友,撸代码的时候自然会有好心情。 😄,所以好看的主题自然不能少.
- 如果你使用过atom,一定很熟悉这种配色.
那么你可以使用One Dark Theme
其它主题可以参看vscode主题
实用插件
有了好看的主题,接下来该安心coding啦,于是我们需要一些比较实用的插件来帮助我们更好的开发。
- Path Intellisense (自动补全路径)
- auto rename tag (自动修改html标签)
- beautify(代码格式化插件)
- git history (git 插件)
- eslint (强大的代码检查插件)
- jQuery Code Snippets (jQuery提示插件)
快捷键
明显使用快捷键丢弃鼠标可以让我们的工作更加高效和快速,所以记住一些常用的快捷键是必要的。
单行编辑
- ⇧⌘K - 单行操作,删除光标所在行
- ⇧⌥↓ - 复制光标所在行到下一行
- ⌥↓ - 将光标所在行移至下一行
多行编辑
- ⌥⌘↓ - 向下插入一个光标,或者使用 ⌥ + Click
- ⇧⌥ + 鼠标拖动 - 多列区块选择,再配合 ⇧⌘→ 可选中至结尾处
- ⇧⌘L - 选择相同文本
- ⌘F2 - 选择相同单词,或者使用 ⌘D 依次加入选中
代码定位
- ⇧⌘\ - 跳转至对应匹配括号处
- ⇧⌘O - 跳转至对象、属性、方法
- ⌃G - 跳转至指定行
- ⌘↓ - 跳转至文件结尾
- ⇧⌘M - 显示当前文件的错误与警告信息
- F12 - 跳转至定义行
- ⌥F12 - 浮窗打开定义行(可直接修改)
- ⌥⌘ + Click - 新开侧边窗口跳转至定义行
- ⇧⌘G - 选中上一次的查找结果
代码展示
- ⌥Z - 开启/关闭代码自动换行,还可通过 editor.wrappingColumn 配置单行最大字符数
- ⇧⌘[ - 代码折叠,⇧⌥⌘[ 为全部折叠
- ⇧⌘] - 代码展开,⇧⌥⌘] 为全部展开
- ⇧⌥F - 代码格式化
窗口操作
- ⌘1 ⌘2 ⌘3 - 切换至对应的子窗口
- ⌃Tab - 切换当前子窗口的标签页
- ⌃` - 打开内置 Terminal 窗口
- ⌘⇧U - 打开/关闭 Output 窗口,可查看 Extensions/Git/Task 输出