0
点赞
收藏
分享

微信扫一扫

03【WebStorm开发工具】


上一篇:02【HTML快速入门】



下一篇:04【】

目录:【HTML5系列教程】


文章目录

  • 三、WebStorm开发工具
  • 3.1 WebStorm简介
  • 3.2 WebStorm安装
  • 3.3 WebStorm基本使用
  • 3.3.1 创建项目
  • 3.3.2 调整字体大小
  • 3.3.3 代码自动补全
  • 3.3.4 WebStorm常用快捷键


三、WebStorm开发工具

3.1 WebStorm简介

WebStorm是JetBrains公司旗下一款 JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

03【WebStorm开发工具】_webstorm

  • 支持的语言和框架:

提供JavaScript、ECMAScript 6、TypeScript、CoffeeScript、Dart和Flow代码辅助功能
帮助编写HTML、CSS、Less、Sass和Stylus代码
支持Node.js和主流框架,如React、Angular、 Vue.js、Meteor等

除了WebStorm,另外市面上比较流行的开发工具还有很多,例如Visual Studio Code、Sublime Text、HbuilderX、Dreamweaver等,但无论是哪款开发工具都是用来辅助我们开发的;

下图是Jetbrains公司对JavaScript开发者使用的IDE统计情况(2021年):

03【WebStorm开发工具】_ide_02

3.2 WebStorm安装

参考WebStorm安装手册

3.3 WebStorm基本使用

3.3.1 创建项目

1)打开WebStorm,点击Create New Project:

03【WebStorm开发工具】_javascript_03


2)选择Empty Project,并选择项目的路径:

03【WebStorm开发工具】_html5_04


3)项目创建完毕:

03【WebStorm开发工具】_webstorm_05


4)创建html文件:

03【WebStorm开发工具】_html_06


Demo01.html文件如下:

03【WebStorm开发工具】_ide_07

3.3.2 调整字体大小

点击菜单栏上的 File->Settings->Editor->Color Scheme->Color Scheme Font 修改字体大小

03【WebStorm开发工具】_ide_08


有的人习惯了按住Ctrl+滚轮上下来完成字体大小的缩放,WebStorm也支持该设置:

03【WebStorm开发工具】_html_09


以同样的方法添加放大字体快捷键:

03【WebStorm开发工具】_webstorm_10

3.3.3 代码自动补全

在WebStorm工具中, Ctrl+空格的快捷键,可以帮助我们补全代码,但是这个快捷键和Windows中的输入法切换快捷键冲突,需要修改WebStorm中的快捷键。 File->Settings->keymap->Main menu->code->Completion->Basic

03【WebStorm开发工具】_javascript_11

3.3.4 WebStorm常用快捷键

  1. ctrl + F12: 可以显示当前文件的结构
  2. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任意目录的文件。
  3. ctrl + d: 行复制
  4. ctrl + x: 剪切行
  5. ctrl + r: 替换
  6. ctrl + / : 单行注释
  7. ctrl + shift + / : 块注释
  8. ctrl + shift + up: 行移动
  9. shift + alt + up: 块移动(if(){},while(){}语句块的移动)
  10. ctrl + b: 跳到变量申明处
  11. ctrl + shift + ]/[: 选中块代码
  12. ctrl + shift + i : 显示当前CSS选择器或者JS函数的详细信息
  13. ctrl + ‘-/+’: 可以折叠项目中的任何代码块,它不是选中折叠,而是自动识别折叠。
  14. alt + ‘7’: 显示当前的函数结构。


举报

相关推荐

0 条评论