WebStorm的入门使用介绍总结

落强君_5812

落强君_5812

2018-09-30

9597人浏览

转载

本篇文章给大家分享的是关于webstorm的入门使用介绍总结,内容有一定的参考价值,有需要的朋友可以看一下,希望对你有所帮助。

WebStorm建立在开源IntelliJ平台之上,JetBrains已经开发和完善了超过15年。其提供了统一的UI,可与许多流行的版本控制系统配合使用,确保在git,GitHub,SVN,Mercurial和Perforce之间提供一致的用户体验。WebStorm提供可定制功能,调整它以完全适合您的编码风格,从快捷方式,字体和视觉主题到工具窗口和编辑器布局。

智能编码辅助

WebStorm可以帮助您编写出色的代码。其智能编辑器具有代码完成,动态代码分析,代码格式化和重构,可提高您的工作效率,并将您的开发体验提升到一个全新的水平。

支持的语言和框架

WebStorm提供JavaScript,ECMAScript 6,TypeScript,CoffeeScript,Dart和Flow 的一流编码帮助。

WebStorm可以帮助您编写HTML,CSS,Less,Sass和Stylus代码。

最重要的是,您可以受益于对Node.js和流行框架的高级支持,例如React,Angular,Vue.js,Meteor等。

代码智能辅助功能

WebStorm分析您的项目,为应用程序中定义的所有方法,函数,模块,变量和类提供最佳代码完成结果。Сoding协助是上下文感知的,也可以是特定于框架的。

在WebStorm中使用CSS时,享受属性及其值的代码完成。在Less和Sass中,获得mixins的帮助。当然,在HTML中,您可以获得所有标签和属性的代码完成。

代码质量分析与检测

WebStorm有数百种内置检查功能,涵盖所有支持的语言。除此之外,您还可以使用ESLint,TSLint,Stylelint,JSCS,JSHint和JSLint。

在您键入时,WebStorm编辑器会直接报告所有错误和警告,并提供许多快速修复选项。

WebStorm具有可能问题的任何代码行都标记在右侧编辑器装订线中,因此您可以轻松地在长文件中发现错误和警告。

您还可以使用WebStorm为整个项目运行代码质量分析,并自动应用选定的快速修复程序。

webstorm使用技巧

  • WebStorm如何更改主题(字体&配色):
    File -> settings -> Editor -> colors&fonts -> scheme name.主题下载地址

  • 如何让webstorm启动的时候不打开工程文件:
    File -> Settings->General去掉Reopen last project on startup.

  • WebStorm如何完美显示中文:
    File -> Settings->Appearance中勾选Override default fonts by (not recommended),设置Name:NSimSun,Size:12

  • WebStorm如何显示行号:
    File -> Settings->Editor,”Show line numbers”打上勾,就显示行号了

  • WebStorm如何让代码自动换行:
    File -> settings -> Editor “Use Soft Wraps in editor” 打上钩,代码就自动换行了

  • 如何点击光标,如何WebStorm显示在本行末尾:
    File -> Settings->Editor “Allow placement of caret after end of line”去掉勾就行了。

  • 如何修改WebStorm快键键:
    File -> Settings->Keymap,然后双击要修改快捷的功能会有提示框出来,按提示操作

  • 如何WebStorm换成自己熟悉编辑器的快键键:
    File ->Settings->Keymap,支持像Visual Studio、Eclipse、NetBeans这样的主流IDE。

  • javascript类库提示。 
    File -> settings -> Javascript -> Libraries -> 然后在列表里选择自己经常用到的javascript类库,最后Download and Install就ok了.

  • 在WebStorm中开发js时发现,需要ctrl + return 才能选候选项: 
    File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: “Smart” 改为 “Always”

  • WebStorm中js提示比较迟缓设置策略
    File -> Code Completion -> Autopopup in 下 1000改为0

  • WebStorm中git配置:
    File -> settings -> Editor -> github,进去改github的账户,如果没有git则不需要.

  • WebStorm的插件安装:
    File ->plugins,然后就选择给力的插件们再安装.(“css-X-fire”插件,用于当使用firebug修改css属性时,编辑器内的css代码也会发生变化。)

webstorm使用心得

  • WebStorm的收藏夹功能:
    当工程目录很庞大时,有些子目录很经常打开,但层级又很深,这时候可以把目录添加到收藏夹里面,添加成功后,左侧有个“Favorites”菜单

  • WebStorm的面包屑导航:
    除了左侧的工程页面,可以选择目录之外,在顶部菜单下有一个类似网站面包屑导航一样的目录也可以实现相同功。点击每个目录就会有下拉菜单显示其下的子目录,很实用.

  • WebStorm的构造器界面:
    注释符合格式的话就会出现。如果是js文件则是js类的函数和对象;css文件的话则是这个css文件的概括;html文件的话则是节点的结构图。话说这几个就是为了方便查看代码的结构性.

  • WebStorm的todo界面:
    给代码加todo注释就会出现这个界面

  • WebStorm的双栏代码界面:
    右击代码选项卡上的文件,然后右键 -> spilt vertically(左右两屏)或者spilt horizontally(上下两屏)

  • WebStorm的本地历史功能:
    找回代码的好办法

WebStorm集成git使用

webstorm中只集成了git的常用操作,并不能完全替代命令行工具。在界面的右下角可以查看处于哪个git分支。也可以在上面点击切换或者新建分支。

  • 查看当前代码与版本库代码的差异:
    右击代码界面任意区域,选择git -> compare with然后选择要比较的版本库。

webstorm快捷键说明

WebStorm的Editing编辑相关快捷键

  • Ctrl + Space:
    Basic code completion (the name of any class, method or variable) 基本代码完成(任何类、函数或者变量名称),改为Alt+S

  • Ctrl + Shift + Enter:
    Complete statement 补全当前语句

  • Ctrl + P:
    Parameter info (within method call arguments) 参数信息 包括方法调用参数

  • Ctrl + mouse over code
    Brief Info 简单信息

  • Ctrl + F1
    Show description of error or warning at caret 显示光标所在位置的错误信息或者警告信息

  • Alt + Insert
    Generate code…(Getters, Setters, Constructors)新建一个文件或者生成代码,…构造函数,可以创建类里面任何字段的getter与setter方法

  • Ctrl + O
    Override methods 重载方法

  • Ctrl + I
    Implement methods 实现方法

  • Ctrl + Alt + T
    Surround with…(if, else, try, catch, for, etc)用 * 来围绕选中的代码行,( * 包括 if 、 while 、 try catch 等)

  • Ctrl + /
    Comment/uncomment with line comment 行注释/取消行注释

  • Ctrl + Shift + /
    Comment/uncomment with block comment 块注释/取消块注释

  • Ctrl + W
    Select successively increasing code blocks 选择代码块,一般是增量选择

  • Ctrl + Shift + W
    Decrease current selection to previous state 上个快捷键的回退,减量选择代码

  • Alt + Q
    Context info 上下文信息

  • Alt + Enter
    Show intention actions and quick-fixes 意图行动,快速见效

  • Ctrl + Alt + L
    Reformat code 根据模板格式对代码格式化

  • Tab/ Shift + Tab
    Indent/unindent selected lines 对所选行进行缩排处理/撤销缩排处理

  • Ctrl + X or Shift + Delete
    Cut current line or selected block to clipboard 剪切当前行或所选代码块到剪切板

  • Ctrl + C or Ctrl + Insert
    Copy current line or selected block to chipboard 拷贝当前行或者所选代码块到剪切板

  • Ctrl + V or Shift + Insert
    Paste from clipboard 粘贴剪切板上的内容

  • Ctrl + Shift + V
    Paste from recent buffers 粘贴缓冲器中最新的内容

  • Ctrl + D
    Duplicate current line or selected block 复制当前行或者所选代码块

  • Ctrl + Y
    Delete line at caret 删除光标所在位置行

  • Ctrl + Shift + J
    Smart line join(HTML and JavaScript only)加入智能行 (HTML 和JavaScript)

  • Ctrl + Enter
    Smart line split(HTML and JavaScript only)分离智能行 (HTML 和JavaScript)

  • Shift + Enter
    Start new line 另起一行

  • Ctrl + Shift + U
    Toggle case for word at caret or selected block 光标所在位置大小写转换

  • Ctrl + Shift + ]/[
    Select till code block end/start 选择直到代码块结束/开始

  • Ctrl + Delete
    Delete to word end 删除文字结束

  • Ctrl + Backspace
    Delete to word start 删除文字开始

  • Ctrl + NumPad+/-
    Expand/collapse code block 扩展/缩减代码块

  • Ctrl + Shift+ NumPad+
    Expand all 扩张所有

  • Ctrl + Shift+ NumPad-
    Collapse 缩减所有

  • Ctrl + F4
    Close active editor tab 关闭活跃编辑标签

WebStorm的Search/replace搜索/替代相关快捷键

  • Ctrl + F 
    Find 当前文件内快速查找代码

  • Ctrl + Shift + F 
    Find in path 指定文件内寻找路径

  • F3 
    Find next 查找下一个

  • Shift + F3 
    Find previous 查找上一个

  • Ctrl + R 
    Replace 当前文件内代码替代

  • Ctrl + Shift + R 
    Replace in path 指定文件内代码批量替代

WebStorm的Usage Search搜索相关快捷键

  • Alt + F7/Ctrl + F7 
    Find usages/Find usages in file 找到使用/在文件找到使用

    WebStorm Linux版
    WebStorm Linux版

    WebStorm 2026.2 Linux tar.gz 安装包,适合在 Linux 桌面环境中搭建现代前端开发与调试工作流。

    下载
  • Ctrl + Shift + F7 
    Highlight usages in file文件中精彩使用

  • Ctrl + Alt + F7 
    Show usages 显示使用

WebStorm的Running运行

  • Alt + Shift + F10 
    Select configuration and run 选择构架,运行

  • Alt + Shift + F9 
    Select configuration and debug 选择构架,修补漏洞

  • Shift + F10 
    Run 运行

  • Shift + F9 
    Debug 修补漏洞

  • Ctrl + Shift + F10 
    Run context configuration from editor 从编辑运行内容构架

  • Ctrl + Shift + X 
    Run command line 运行命令行

WebStorm的Debugging Debugging相关快捷键

  • F8 
    Step over 不进入函数

  • F7 
    Step into 单步执行

  • Shift + F7 
    Smart step into 智能单步执行

  • Shift + F8 
    Step out 跳出

  • Alt + F9 
    Run to cursor 运行到光标处

  • Alt+ F8 
    Evaluate expression 评估表达

  • F9 
    Resume program 重新开始程序

  • Ctrl + F8 
    Toggle breakpoint 切换断点

  • Ctrl + Shift + F8 
    View breakpoints 查看断点

WebStorm的Navigation 定位相关快捷键

  • Ctrl + N 
    Go to class跳转到指定类

  • Ctrl + Shift + N 
    Go to file 通过文件名快速查找工程内的文件

  • Ctrl + Alt +Shift + N 
    Go to symbol 通过一个字符查找函数位置

  • Alt + Right/ left 
    Go to next/ previous editor tab 进入下一个/ 上一个编辑器选项

  • F12 
    Go back to previous tool window 进入上一个工具窗口

  • Esc 
    Go to editor(from tool window) 从工具窗口进入编辑器

  • Shift + Esc 
    Hide active or last active window 隐藏活动窗口

  • Ctrl + Shift + F4 
    Close active run/message/find/…tab 关闭活动….标签

  • Ctrl + G 
    Go to line 跳转到第几行

  • Ctrl + E 
    Recent files popup 弹出最近打开的文件

  • Ctrl + Alt + Left/Right 
    Navigate back/forward 导航前进/后退

  • Ctrl + Shift + Backspace 
    Navigate to last edit location 向最近编辑定位导航

  • Alt + F1 
    Select current file or symbol in any view 查找当前选中的代码或文件在其他界面模块的位置

  • Ctrl + B or Ctrl + Click 
    Go to declaration跳转到定义处

  • Ctrl + Alt + B 
    Go to implementation(s) 跳转方法实现处

  • Ctrl + Shift + B 
    Go to type declaration 跳转方法定义处

  • Ctrl + Shift + I 
    Open quick definition lookup 打开定义快速查找

  • Ctrl + U 
    Go to super-method/super-class 跳转方法/超阶级

  • Alt + Up/Down 
    Go to previous/next method 在方法间快速移动定位

  • Ctrl + ]/[ 
    Move to code block end/start 跳转到编码块结束/开始

  • Ctrl + F12 
    File structure popup 文件结构弹出

  • Ctrl + H 
    Type hierarchy 类型层次

  • Ctrl + Alt + H 
    Call hierarchy 调用层次结构

  • F2/ Shift + F2 
    Next/previous highlighted error 跳转到后一个/前一个错误,高亮错误或警告快速定位,使用这个快捷键可以快捷在出错的语句之间进行跳转。

  • F4/Ctrl + Enter 
    Edit source/ View source 编辑源代码/查看源代码

  • Alt + Home 
    Show navigation bar 显示导航栏

  • F11 
    Toggle bookmark 切换标记

  • Ctrl + F11 
    Toggle bookmark with mnemonic 采用记忆切换标记

  • Ctrl + #[0-9] 
    Go to numbered bookmark 跳转到带编号的标记

  • Shift + F11 
    Show bookmark 显示标记

WebStorm的Refactoring 重构相关快捷键

  • F5
    Copy 拷贝

  • F6 
    Move 移动

  • Alt + Delete 
    Safe Delete 安全删除

  • Shift + F6 
    Rename 重新命名

  • Ctrl + Alt + N 
    Inline Variable 嵌入变量

  • Ctrl + Alt + M 
    Extract Method( Javascript only) 提取函数

  • Ctrl + Alt + V 
    Introduce Variable 引入变量

  • Ctrl + Alt + F 
    Introduce Field 引入域

  • Ctrl + Alt + C 
    Introduce Constant 引入常量

在WebStorm中VCS/Local History 版本控制系统/ 本地历史相关的快捷键

  • Alt + BackQuote( ) 
    ‘VCS’quick popup 快速弹出 VCS

  • Ctrl + K 
    Commit project to VCS 提交项目至VCS

  • Ctrl + T 
    Update project from VCS 从VCS 更新项目

  • Alt + Shift + C 
    View recent changes 查看最新改变

使用WebStorm时General 常用的相关快捷键

    • Ctrl + Shift +A 
      Find action 查找并调用编辑器的功能

    • Alt + #[0-9] 
      Open corresponding tool window 快速切换打开界面模块

    • Ctrl + Alt + F11 
      Toggle full screen mode 切换全屏模式

    • Ctrl + Shift + F12 
      Toggle maximizing editor 切换最大化编辑器

    • Alt + Shift + F 
      Add to Favorites 将当前文件添至收藏夹

    • Alt + Shift + I 
      Inspect current file with current profile 使用当前属性检查当前文件

    • Ctrl + BackQuote( ) 
      Quick switch current scheme 快速转换现有组合

    • Ctrl + Alt + S 
      Open setting dialog 打开设置对话框

    • Ctrl + Tab 
      Switch between tabs and tool window 标签和工具窗的转换(与windows快捷键冲突)

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

2026.02.13

232

17

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

2026.02.25

460

17

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

2026.03.13

311

19

TypeScript 全栈开发进阶指南
TypeScript 全栈开发进阶指南

面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

2026.06.03

226

29

TypeScript Node.js 全栈工程化与Monorepo架构实践
TypeScript Node.js 全栈工程化与Monorepo架构实践

本专题围绕 TypeScript 在 Node.js 全栈开发中的工程化实践展开,系统讲解 Monorepo 架构设计、包管理策略、模块复用机制以及服务端与前端统一类型系统的构建方法。通过真实项目案例,帮助开发者提升大型全栈项目的可维护性与协作效率。

2026.06.16

438

8

node.js调试
node.js调试

node.js调试可以使用console.log()输出调试信息、断点调试和第三方调试工具。详细介绍:1、console.log()输出调试信息,通过在代码中插入console.log()语句,开发人员可以在控制台输出变量的值、函数的执行结果等信息,以便观察代码的执行流程和状态;2、断点调试,可以在代码中设置断点,以便在特定位置暂停代码的执行,观察变量的值和执行流程等。

2023.09.19

8569

8

JavaScript 全栈开发基础(Node.js + 前端)
JavaScript 全栈开发基础(Node.js + 前端)

本专题系统介绍 JavaScript 在全栈开发中的核心知识结构,涵盖 Node.js 基础、Express/Koa 接口构建、前端交互设计、模块化与包管理、数据库连接、前后端数据通信与部署流程。通过完整项目示例,帮助学习者掌握从浏览器到服务器的一体化开发能力,实现真正意义上的全栈入门。

2025.11.26

354

14

Node.js后端开发与Express框架实践
Node.js后端开发与Express框架实践

本专题针对初中级 Node.js 开发者,系统讲解如何使用 Express 框架搭建高性能后端服务。内容包括路由设计、中间件开发、数据库集成、API 安全与异常处理,以及 RESTful API 的设计与优化。通过实际项目演示,帮助开发者快速掌握 Node.js 后端开发流程。

2026.02.10

721

17

JavaScript Node.js流处理与高效数据管道构建实践
JavaScript Node.js流处理与高效数据管道构建实践

本专题聚焦 Node.js 在大规模数据处理场景中的应用,系统讲解 Stream 流机制、背压控制、管道(Pipe)处理以及文件与网络数据流的高效传输方式。内容包括可读流、可写流、双工流与转换流的实现原理,并结合实际案例构建高性能数据处理管道,帮助开发者提升数据处理效率与系统吞吐能力。

2026.04.07

264

13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程