webstorm主题设置

article/2025/10/5 19:36:17

1、从WebStorm主题,下载自己喜欢的主题

如下图,点击鼠标右键“另存为”,保存(默认为ilc格式)。


2、根据不同的操作系统,将其copy到不同的webstorm安装目录中。

1.apple系统

复制下载的xml theme文件,使用shift+command+g键进入:

~/Library/Preferences/WebIDE10/colors/ Starting


如果为版本4,则为以下目录:

~/Library/Preferences/WebIde40/colors/

将xml文件复制到此文件夹。


2.windows系统

将xml theme文件复制到------C:/Users/USERNAME/.WebIde10/config/colors文件夹

第二步:添加主题文件到webstrom

先打开------->打开.WebStorm10------->

新建一个名叫colors的文件夹 ------然后将下载的文件放进去

3.linux

将xml theme文件复制到

~/.WebIde50/config/colors/

3、重启WebStorm:

File > Settings > Editor > Colors & Fonts ,选择刚才xml文件名的Cheme name,点击apply即可,如下图所示。



webstorm添加多个项目到当前工作目录

通常我们会多个Project同时操作,这样打开多个窗口然后不断切换会非常麻烦,WebSorm为我们提供了可以添加多个项目到工作目录区:

1. Window版操作

File-> Settings -> Directories -> Add Content Root,选择你要加入的Project 点击OK -> Apply -> OK 搞定。


webstorm安装后的一些设置技巧

如何更改主题(字体&配色):
File -> settings -> Editor -> colors&fonts -> scheme name.主题下载地址
如何让webstorm启动的时候不打开工程文件:
File -> Settings->General去掉Reopen last project on startup.
如何完美显示中文:
File -> Settings->Appearance中勾选Override default fonts by (not recommended),设置Name:NSimSun,Size:12
如何显示行号:
File -> Settings->Editor,”Show line numbers”打上勾,就显示行号了
如何代码自动换行:
File -> settings -> Editor “Use Soft Wraps in editor” 打上钩,代码就自动换行了
如何点击光标,显示在本行末尾:
File -> Settings->Editor “Allow placement of caret after end of line”去掉勾就行了。
如何修改快键键:
File -> Settings->Keymap,然后双击要修改快捷的功能会有提示框出来,按提示操作
换成自己熟悉编辑器的快键键:
File ->Settings->Keymap,支持像Visual Studio、Eclipse、NetBeans这样的主流IDE。
javascript类库提示。 
File -> settings -> Javascript -> Libraries -> 然后在列表里选择自己经常用到的javascript类库,最后Download and Install就ok了.
在开发js时发现,需要ctrl + return 才能选候选项: 
File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: “Smart” 改为 “Always”
js提示比较迟缓
File -> Code Completion -> Autopopup in 下 1000改为0
git配置:
File -> settings -> Editor -> github,进去改github的账户,如果没有git则不需要.
插件安装:
File ->plugins,然后就选择给力的插件们再安装.(“css-X-fire”插件,用于当使用firebug修改css属性时,编辑器内的css代码也会发生变化。)
以后更新

webstorm使用心得:

收藏夹功能:

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

面包屑导航:

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

构造器界面:

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

todo界面:

给代码加todo注释就会出现这个界面

双栏代码界面:

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

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

git使用

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

查看当前代码与版本库代码的差异:

右击代码界面任意区域,选择git -> compare with然后选择要比较的版本库。

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 关闭活跃编辑标签
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 指定文件内代码批量替代
Usage Search搜索相关快捷键

Alt + F7/Ctrl + F7 
Find usages/Find usages in file 找到使用/在文件找到使用
Ctrl + Shift + F7 
Highlight usages in file文件中精彩使用
Ctrl + Alt + F7 
Show usages 显示使用
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 运行命令行
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 查看断点
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 显示标记
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 引入常量
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 查看最新改变
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快捷键冲突)

小伙伴们是不是已经对这款javascript的开发工具webstrom有所认识了呢,迫不及待的想去试试呢,保证你用了之后就爱不释手。



http://chatgpt.dhexx.cn/article/ODdcDBYJ.shtml

相关文章

webstorm-主题和配色

URL:http://blog.csdn.net/xiaoyu411502/article/details/46702391 1、引子 以前介绍过 Sublime text 3 系列的文章,着重介绍了 Sublime text 3 如何下载、安装、插件、配置等内容。Sublime text 3的轻量和富扩展,为前端开发带来了很多的便捷&#xff0…

webstorm 开发插件集合

下列插件均可在工具中的插件市场直接下载 官网安装插件教程:https://www.jetbrains.com 插件下载地址:https://plugins.jetbrains.com 一、开发工具美化 设置特定背景图片 步骤: 文件 – 设置 – 如图 就可以了 插件 Sexy Editor 更名为 A…

WebStorm自定义主题/护眼主题

先看一下效果图 护眼主题:这里将背景色设置为C7EDCC,选中的文本颜色设置为68AB52,会操作的可以自己操作了,不会的可以往下看: File->Settings->Editor->Colors&Fonts->General 1. 设置背景色&#x…

WebStorm:常用插件(全部实用)包含主题、界面、开发效率等

一、主题插件 Material Theme UI 推荐原因:这款插件不仅可以设置主题,还可以设置其他 UI界面。 注意:安装完成之后,记得一定要重启一下WebStorm。 这款主题的设置:Settings —> Appearance & Behavior —>…

2020北航计算机夏令营机试题目讲解

一、二叉树(60分)   给你一个整数序列,用这些数构成一个完全二叉排序树,输出此二叉树的层序遍历序列。   输入的第一行是一个整数n,表示这个整数序列的长度,输入的第二行包含n个整数,每个数代表完全二叉排序树的一…

数说CS|北航计算机保研生源大起底!

1、院校介绍 北京航空航天大学自1958年建立计算机专业以来已走过了60年的发展历程,目前有4个专业:计算机科学与技术、软件工程、网络空间安全、计算机技术(专硕)(含非全)。 2017年全国一级学科评估中,计算机科学与技…

北航:2018年计算机学院研究生推免机试第一题

同时也是PAT甲级1024 1024 Palindromic Number (25)(25 分) A number that will be the same when it is written forwards or backwards is known as a Palindromic Number. For example, 1234321 is a palindromic number. All single digit numbers …

北航计算机学院往年夏令营+预推免机试题目汇总

北航计算机学院硕士复试机经面经: 北航计算机学院往年夏令营预推免机试题目汇总 北航计算机学院往年夏令营考研面试题目汇总 北航计算机学院往年夏令营考研面试数理题目汇总 以下是我在网络上找到的北航计算机学院往年夏令营预推免机试题目,将其汇总到一…

北京航空航天大学计算机考研信息汇总

原文转载于:http://www.noobdream.com/schoolinfo/20/ 北京航空航天大学计算机学院官网 北京航空航天大学软件学院官网 北京航空航天大学网络空间安全学院官网 北京航空航天大学(Beihang University),简称北航,由…

北航计算机2018年保研推免经历

最近没怎么写博客,是因为忙于保研的事情,今天只睡了5个小时一大清早就去第一个面了计算机,下午出了预录取名单,晚上上保研系统确定了志愿,可以说稍微有些宽下心来了。 我是从本校软件学院推免到计算机学院。 先上图 …

2022年北京航空航天大学计算机考研复试分数线

北京航空航天大学简称“北航”,2022年研招初试已经结束了,对于参加本次研究生的考生而言,提前了解下计算机考研复试分数线,可以让自己心里有个底。不过根据往年研招复试分数线公布时间来看,预计2022年3月中下旬考研复试…

北航计算机学院往年夏令营+考研面试数理题目汇总

北航计算机学院硕士复试机经面经: 北航计算机学院往年夏令营预推免机试题目汇总 北航计算机学院往年夏令营考研面试题目汇总 北航计算机学院往年夏令营考研面试数理题目汇总 以下是笔者汇总的北航计算机学院往年夏令营考研面试数理题目。 线代 矩阵的范数 我们可以…

北航计算机学院往年夏令营+考研面试题目汇总

北航计算机学院硕士复试机经面经: 北航计算机学院往年夏令营预推免机试题目汇总 北航计算机学院往年夏令营考研面试题目汇总 北航计算机学院往年夏令营考研面试数理题目汇总 以下是我在网络上找到的北航计算机学院往年面试题目,将其汇总到一篇文章&…

【已更新】北航计算机学院考研知识点总结(专业课961)

#文档整理不易,有偿资料详讯wechat:_129Ww 961复习要点 文章目录 961复习要点计组概述计算机组成与结构概述基本组成计算机的功能 计算机中数的表示基本约束:采用二进制,只有0和1 计算机的基本工作过程 总线与输入输出控制方式总…

北航计算机考研经验_2018届考研

北航计算机考研经验 标签(空格分隔): 考研 我报的是计算机专硕,不分方向。初试347分,其中政治72,英语67,数学114,专业课94。2018年专硕复试线290分/学硕310分;我347分排…

2024北京航空航天大学计算机考研信息汇总

北京航空航天大学计算机学院官网 北京航空航天大学软件学院官网 北京航空航天大学网络空间安全学院官网 北京航空航天大学(Beihang University),简称北航,由中华人民共和国工业和信息化部直属,中央直管副部级建制…

北京航空航天大学计算机考研资料汇总

北京航空航天大学计算机学院官网 北京航空航天大学软件学院官网 北京航空航天大学网络空间安全学院官网 北京航空航天大学(Beihang University),简称北航,由中华人民共和国工业和信息化部直属,中央直管副部级建制…

炸了!软件工程超高报录比31:1,北京航空航天大学,连非全都有近千人报考!...

北航研招办官微公布了报考北航的数据: 图片来源:北航研招办官微 https://mp.weixin.qq.com/s/48uNAUnRYGkqkX6sn5rV-A 北航全校一共报考16269人(截至10月30日) 我这边找到了北航的招生目录,其中包含了招生人数&#xf…

2023北京航空航天大学计算机考研信息汇总

原文转载于:北京航空航天大学 N诺小程序 - 计算机学习考研必备神器 北京航空航天大学计算机学院官网 北京航空航天大学软件学院官网 北京航空航天大学网络空间安全学院官网 北京航空航天大学(Beihang University),简称北航…

idea全局搜索文件

在idea中全局搜索CTRLshirtF有時候會不管用 可以直接嘗試下面的方法