2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效

作者 : admin 本文共1909个字,预计阅读时间需要5分钟 发布时间: 2023-11-30 共1人阅读

大家好,今天为大家带来的事2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效。感兴趣的可以收藏点赞哦。

文章目录

    • 1 简介
    • 2 安装步骤
    • 3 提高效率的 10 个方法
        • 1、webstorm开启es6环境
        • 2、新建vue文件的模板设置
        • 3、webstorm设置代码自动换行
        • 4、webstorm开启代码提示
        • 5、面板展示与增加面板展示项
        • 6、全局搜索(shift键双击,搜索包括文件,变量,函数等等)
        • 7、设置主题样式、字体大小、字体样式、行高(Ctrl + Alt + S)
        • 8、文件修改的历史版本对比
        • 9、开启代码补全
        • 10、多光标选择
    • 4 常用快捷键

1 简介

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

2 安装步骤

WebStorm 的安装其实很简单,大概可以分为 8 步。

1、如果之前装有WebStorm版本, 可以先删卸载, 再重新安装

2、到官网下载WebStorm安装包
http://www.jetbrains.com/zh-cn/webstorm/download/other.html
推荐使用2021.2.2版本, 亲测有效
2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图

3、双击打开exe程序,点击“Next”
2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图(1)

4、选择安装位置,点击“Next”
2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图(2)

5、全选所有选项,点击“Next”
2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图(3)

6、确认安装界面,点击“Next”
2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图(4)

7、等待安装
2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图(5)

8、安装完成,选择何时启动,点击“Finish”
2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图(6)

  1. 如果想了解怎样授权的话,可以看这篇教程,里面有详细介绍 WebStorm 授权教程 http://it1314.top/article/778/

3 提高效率的 10 个方法

1、webstorm开启es6环境

2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图(7)

2、新建vue文件的模板设置

2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图(8)

3、webstorm设置代码自动换行

2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图(9)

4、webstorm开启代码提示

2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图(10)

2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图(11)

5、面板展示与增加面板展示项

2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图(12)

6、全局搜索(shift键双击,搜索包括文件,变量,函数等等)

2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图(13)

7、设置主题样式、字体大小、字体样式、行高(Ctrl + Alt + S)

2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图(14)

8、文件修改的历史版本对比

2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图(15)

2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图(16)

9、开启代码补全

(参考网址:http://jingyan.baidu.com/article/a3f121e4a64767fc9152bb40.html)

2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图(17)

10、多光标选择

修改目的:将上述代码的class属性修改item = > item1;修改方法:按住 Alt 键,鼠标便变成了同一位置向下选择。

2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效插图(18)

对于同一位置的,我们可以使用上述方法,对于不同位置的item => item1,我们可以选择一个,然后 _ 按住 Alt 键_
,在选择第2个、第3个、第4个…第n个即可,实现统一修改。

4 常用快捷键

快捷键说明
Ctrl+/ 或 Ctrl+Shift+/注释(// 或者/…/ )
Shift+F6重命名
Ctrl+X删除行保存到剪切板
Ctrl+Y删除一行
Shift+Enter重新开始下一行(无论光标在哪个位置)
Ctrl + Shift + Enter重新开始上一行(无论光标在哪个位置)
Ctrl+D复制行
Ctrl+G查找行
Ctrl+Shift+Up/Down代码向上/下移动。
F2 或 Shift+F2高亮错误或警告快速定位
Ctrl+Shift+F7高亮显示选中文本,按Esc高亮消失
Ctrl+B 或 Ctrl+鼠标左键快速打开光标处的类或方法
Ctrl + Alt + B跳转方法实现处
Ctrl + Shift + I打开定义快速查找
Alt + Up/Down跳转到上一个/下一个方法
Ctrl+E最近打开的文件
Alt+F1查找代码所在位置
Ctrl+Alt+L格式化代码
Ctrl+R替换文本
Ctrl+Shift+R指定目录内代码批量替换
Ctrl+Shift+F指定目录内代码批量查找
Ctrl+F查找文本
Ctrl+P方法参数提示
F3查找下一个
Shift+F3查找上一个
Alt+Shift+F将当前文件加入收藏夹
Ctrl+Alt+S打开配置窗口
Ctrl+Shift+N通过文件名快速查找工程内的文件(必记)
Ctrl+Shift+Alt+N通过一个字符快速查找位置(必记)
Shift+Enter重新开始一行(无论光标在哪个位置)
Ctrl + Alt + T用 if, else, try, catch, for 等来围绕选中的代码块
Ctrl + Shift + U切换光标所在位置单词的大小写
Ctrl + Delete删除到单词结束
Ctrl + Backspace删除到单词开始
Ctrl + E弹出最近打开的文件
F11切换书签,就是 sublime text 的F2
Ctrl + Shift + F12切换最大化编辑器
Alt + Shift + F添加至收藏夹
本站无任何商业行为
个人在线分享 » 2023年 WebStorm 下载、安装教程、附详细图文教程,亲测有效
E-->