webStorm 3.0配置使用主题背景色等

article/2025/10/5 16:50:07

http://www.cnblogs.com/jikey/archive/2012/01/16/2323590.html

 VIM的配色只到这个级别:http://www.cnblogs.com/jikey/archive/2011/12/29/2306057.html



合适的工具会事半功倍,当然也得把握分寸,要不就成了会得越多干的越多的“苦力者”。
编辑类软件层出不群,各有所长,各有所短。找到一个合适的还真是难。还好有webstorm的出现,最近又是3.0的新版本发布。为什么这么说呢,她与其它的编辑器有什么不同:
1. 任何一个编辑器都需要保存(ctrl + s),这是所有win平台上编辑类软件的特点,但是webstorm编辑文件右上角是没有那个熟悉的米号的。

换句话说,所有的操作都直接存储,这样带来的坏处就是,没有以前的米号标识,万一键盘误操作也会被立即存储。

省去了ctrl + s之后,在结合Firefox的vim,基本不动鼠标就可以看到结果页面了。 

2. 任何一个编辑器只要文件关闭了就没有历史记录了,但是webstorm有。就是说,只要webstorm不关闭,你的文件随时可以返回到之前的操作,webstorm关闭重启后这些历史记录就没有了。这样的坏处也是显然的,由此带来的内存消耗也必然比较大。
3. 任何一个编辑器,除了服务器svn之外,没有本地版本,但是webstorm提供一个本地文件修改历史记录。

4. 与时俱进的眼光。zencoding于2009年出现于it界,在这之后,鲜有工具直接集成到里边。webstorm 2.0之后就集成了。node.js,html5,git,cvs等 就不一一列举了。 

5. 提供的插件也是比较齐全,安装非常方便。这样带来了另外的问题,以前的eclipse是安装第三方的,webstorm貌似不能安装第三方的插件。

6. 可以导出当前设置:File -> Export setting 下面就是导入设置。 

 

其它的使用: 

1. 主题,参照这里。(所需的文件下载 第4条中setting.rar即可,里边包括文章中提到的颜色配置文件)

2. 添加VIM插件:
File -> Settings -> Plugins -> Browse repositories -> 搜索vim,对它单击右键Download and install,然后重启IDE就可以了。
重启之后,控制台会输出: “8:50:07 IdeaVim: Vim keymap was successfully enabled” 说明vim插件安装成功。另外在aptana2.0里边安装vim插件,真是头痛,所有的文件都支持vim模式,在.html居然不支持,郁闷。

这样会出现另外一个问题,我如果想用ctrl+c,ctrl+v等一些默认的快捷键,该如何呢?安装VIM之后修改Defualt ,在Main menu -> Edit -> Copy 单击右键 Remove ctrl + Insert 只会剩下一个ctrl + c。这样配置后,可以使用部分默认的快捷键,90%的VIM快捷键。这之后还有个问题需要注意,在webstorm重启之后,又被全局默认为vim快捷键,需要在File -> Setting -> Keymap -> Keymaps 中选择Default copy,要不然,还是全局的VIM快捷键。

3. 除了webstorm之外,此公司还提供另外一个针对phper的开发工具,phpStorm,主页上说明,phpstorm包括所有webstorm的功能。但是习惯于大括号去方法名在同一行显示,所以还得配置:

File -> Settings -> code style -> PHP -> Wrapping and Braces -> Braces placement ->

In method declaration : End of line. 

4. zencoding由于其提供的快捷键,确实 zencoding快捷键修改:

File -> Setting -> Live Templates 

这里边如果你修改一个没有什么特别的,但是如果要添加一个需要在下面需要类型:No applicable contexts yet. Define ,单击Define选择要添加的类型。

如何合理的修改,参考这里。 

如果你对我修改后的文件设置感兴趣请点这里下载。 (其中就是从我的webstorm导出的setting.jar文件,包括主题,快捷键,zencoding.css等)

一次性导入:

导入:File -> Import settings...
下载后单独模块配置目录:win7 -> C:\Users\jikey(用户名)\.WebIde10\config

也可以一次性导出settings : File -> Export sttings... 

5. 在开发js时发现,需要ctrl + return 才能选候选项,又需要配置:

File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion:

'Smart' 改为 Always

6. 注意的地方是:Webstorm的调试是不支持中文路径中文文件名。

以下是webstorm的快捷键说明:

复制代码
1. ctrl + shift + n: 打开工程中的文件(类似于eclipse中的ctrl+shift+R),目的是打开当前工程下任意目录的文件。
2. ctrl + j: 输出模板
3. ctrl + b: 跳到变量申明处
4. ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation)
5. ctrl + []: 匹配 {}[]
6. ctrl + F12: 可以显示当前文件的结构 
7. ctrl + x: 剪切(删除)行,不选中,直接剪切整个行,如果选中部分内容则剪切选中的内容
8. alt + left/right:标签切换
9. ctrl + r: 替换
10. ctrl + shift + up: 行移动
11. shift + alt + up: 块移动(if(){},while(){}语句块的移动)
12. ctrl + d: 行复制
13. ctrl + shift + ]/[: 选中块代码 < table >.... </ table >
14. ctrl + / : 单行注释
15. ctrl + shift + / : 块注释
16. ctrl + shift + i : 如果是css中的class则显示当前class详细信息,如果是js则显示function的详细信息(想象一下,如果在jquery的方法上查看详细信息,就直接可以看到实现代码了),如果是php,那当时还是function的详细信息

 

17. ctrl + '-/+': 可以折叠项目中的任何代码块,包括htm中的任意nodetype=3的元素,function,或对象直接量等等。它不是选中折叠,而是自动识别折叠。
18. ctrl + '.': 折叠选中的代码的代码。
19. shift + esc: 当前激活的任意小窗口最小化,也可以是alt + '数字键',数字在小窗口标题栏上有显示。
20. alt + '7': 显示当前的函数结构。类似于eclipse中的outline的效果。试验了一下,要比aptana的给力一些,但还是不能完全显示prototype下面的方法名。
21. 如果是*.html页面,则在文件名下的导航栏某DOM结构上右键,可以全选当前DOM结构。

22. 项目中添加对jQuery的支持。

File -> settings -> Javascript Libraries -> Add

在files中添加路径,在documentations urls中添加文档支持。这里边需要注意一下的是,要添加原始未压缩的代码,*.min.js版的方法是不会被提示。

添加完成后,右边菜单中还有一 download 按钮,单击之后,他会自动选择最新版的js库进行搜索,然后在弹出的列表中,再单击选择一个后,点击Download and Install之后,才会被下载。这块体验不是太好,没有checkbox,也没有radio,只是选中后整行变暗。 

如果添加多个版本的jQuery,就可以直观的看到各个版本之间新方法的差别了。

* 在这项的子菜单中 Usage Scope 右边 Project 第二栏Library下单击,选择新添加的jQuery,使其对整个项目进行覆盖。

也可以在当前页面右键Use JavaScript Library 中选择最顶的刚添加的jQuery支持。 

 

当然,并不是添加的越多越好,添加的多之后,在代码提示后会有数毫秒的延迟,需要谨慎选择最新版。 

23. 自动换行设置: File | Settings | Editor --> Use soft wraps in editor

复制代码

以下是jquery1.1在ws中效果,还有底下显示vim启动运行的提示,左侧显示数字标题栏名称。

 http://www.cnblogs.com/jikey/archive/2012/01/16/2323590.html


默认的快捷键:

复制代码
1. ctrl + shift + n: 打开工程中的文件
2. ctrl + j: 输出模板
3. ctrl + b: 跳到变量申明处
4. ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap  with Abbreviation), ctrl + shift + del: 删除包裹
5. ctrl + []: 匹配 {}[]
6. ctrl + F12: 可以显示当前文件的结构,快速跳转到目标函数 
7. ctrl + x: 剪切行
8. alt + left/right:标签切换
9. ctrl + r: 替换 ctrl + shift + r: 全局替换
10. ctrl + shift + up: 行移动
11. shift + alt + up: 块移动
12. ctrl + d: 行复制
13. ctrl + shift + ]/[: 选中块代码<table>....</table>
14. ctrl + / : 单行注释
15. ctrl + shift + / : 块注释
16. ctrl + shift + i : 显示当前class,function的详细信息 
17. ctrl + p: 显示默认参数
18. ctrl + shift + v: 可以复制多个文本
19. shift + enter: 智能跳到下一行
20. ctrl + k: svn 提交
21. ctrl + shift + u: 大小写
22. ctrl + ~ : 切换主题
23. ctrl + F11: 添加标签 ctrl + shift + 大键盘数字键
24. ctrl + alt + F12: file path
25. ctrl + alt + a: search keymap 
26. shift + F6: 重构标签名
复制代码

 

以下vim常用快捷键:

 

复制代码
一. 移动:
    h,j,k,l: 左,下,上,右。
    w: 下一个词的词首。W:下一个单词(不含标点)。
    e:下一个词的词尾。E:不含标点。
    b:上一个词的词首。B:不含标点。
     <>: v 模式选中后进行缩进。
二. 跳转:
    %: 可以匹配{},"",(),[]之间跳转。
    H、M、L:直接跳转到当前屏幕的顶部、中部、底部。
    #H:跳转到当前屏的第#行。
    #L:跳转到当前屏的倒数第#行。
    zt: 当前编辑行置为屏顶。
    zz: 当前编辑行置为屏中。
    zb: 当前编辑行置为屏底。
    G:直接跳转到文件的底部。
    gg: 跳转到文件首。
    gd: 跳转到光标所在函数和变量的定义。
    ():跳转到当前的行首、行尾。
    {}:向上、向下跳转到最近的空行。
    [{:跳转到目前区块开头。
    ]}:跳转到目前区块结尾。
    0: 跳转到行首。
    $: 跳转到行尾。
    2$: 跳转到下一行的行尾。
    #:跳转到该行的第#个位置。
    #G: 15G,跳转到15行。
    :#:跳转到#行。
三. 选择:
    1.v: 开启可视模式。 V: 开启逐行可视模式。
    2.^V: 矩形选择。
    3.v3w: 选择三个字符。  
    4.ab:包括括号和()内的区域。
    5.aB:包括括号和{}内的区域。
    6.ib:括号()内的区域。
    7.iB:括号{}内的区域。
    8.aw:标记一个单词。
四. 编辑:
    1. 新增:
        i: 光标前插入。
        I: 在当前行首插入。
        a: 光标后插入。
        A: 当前行尾插入。
        O: 在当前行之前插入新行。
        o: 在当前行之后插入新行。
    2. 修改 c(change) 为主:
        r: 替换光标所在处的字符。
        R:替换光标所到之处的字符。
        cw: 更改光标所在处的字到字尾处。
        c#w: c3w 修改3个字符。
        C:修改到行尾。
        ci':修改配对标点符号中的文本内容。
        di':删除配对标点符号中的文本内容。
        yi':复制配对标点符号中的文本内容。
        vi':选中配对标点符号中的文本内容。
        s:替换当前一个光标所处字符。
        #S:删除 # 行,并以新文本代替。
    3. 删除 d(delete) 为主:
        D:删除到行尾。
        X: 每按一次,删除光标所在位置的前面一个字符。
        x: 每按一次,删除光标所在位置的后面一个字符。
        #x: 删除光标所在位置后面6个字符。
        d^: 删至行首。
        d$: 删至行尾。
        dd:(剪切)删除光标所在行。        
        dw: 删除一个单词/光标之后的单词剩余部分。
        d4w: 删除4个word。
        #dd: 从光标所在行开始删除#行。
        daB: 删除{}及其内的内容。
        diB: 删除{}中的内容。
        n1,n2 d:将n1,n2行之间的内容删除。
    4. 查找:
        /: 输入关键字,发现不是要找的,直接在按n,向后查找直到找到为止。
        ?: 输入关键字,发现不是要找的,直接在按n,向前查找直到找到为止。
        *: 在当前页向后查找同一字。
        #: 在当前页向前查找同一字。
    5. 复制 y(yank)为主:
        yw: 将光标所在之处到字尾的字符复制到缓冲区中。
        #yw: 复制#个字到缓冲区。
        Y:相当于yy, 复制整行。
        #yy:表示复制从光标所在的该行往下数#行文字。
        p: 粘贴。所有与y相关的操作必用p来结合粘贴。
        ]p:粘贴到合适的缩进处。
        n1,n2 co n3:复制第n1行到第n2行之间的内容到第n3行后面。
    6. 大小写转换:
        gUU: 将当前行的字母改为大写。
        guu: 将当前行的字母改为小写。
        gUw: 将当前光标下的单词改为大写。
        guw: 将当前光标下的单词改为小写。
        a. 整篇大写:
        ggguG
        gg: 光标到文件第一个字符。
        gu: 把选择范围全部小写。
        G: 到文件结束。
        b. 整篇小写:gggUG
    7.  其它:
        J:当前行和下一行合并成一行。
    8.  移动:
        n1,n2 m n3:将n1行到n2行之间的内容移至n3行下。
复制代码

这样几番配置认识:

1. 在javascript方面比aptana更接近于当前的流行开发趋势。

2. 在html,css上比dreamweaver更大胆,更有洞察力。

3. 在php上比zendstudio更带有一点英雄主义色彩。

4. 在java上,此公司提供另外一款工具:IntelliJ IDEA

可以看出纯英文的界面,多如牛毛的快捷键,不推荐新手使用。太方便就会容易培养惰性,而惰性是开发人员的大敌。

 

最后感谢火爷,是火爷教会我使用webstorm。火爷一直是走在技术前沿的pyer.

 

欢迎转载,但是必须保留本文的署名豪情(包含链接)。

分类:  WebStorm/PhpStorm





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

相关文章

Idea主题风格插件Material Theme

目录 1 idea插件material-theme 设置 2 下载主题风格jar直接使用 设置 1 idea插件material-theme 偶然发现一款“暗黑系列”idea主题插件&#xff0c;感觉非常不错&#xff0c;分享一下~ github&#xff1a;https://github.com/equinusocio/material-theme plugins 安…

IDEA更改主题插件——Material Theme UI详解

文章目录 IDEA更改主题插件——Material Theme UI一、安装二、设置1. 主设置(1) 主题(2) 突出颜色 2. 高级设置之选项卡3. 高级设置之compact4. 高级设置之图标(icons)关于icons不能使用问题Atom Material Icons 插件设置 5. 高级设置之目录中的格式(Project View)6. 高级设置之…

webstorm 主题 配色

webstorm默认的颜色是白色的&#xff0c; 更改默认的主题颜色需要导入一个jar包&#xff0c;如下图&#xff1a; 点击file下的import settings上传一个jar文件就完成了。 推荐一个配色网站&#xff1a; http://color-themes.com/ 选择一个你喜欢的颜色下载就好了。

webstorm入门-主题和配色

转自&#xff1a;https://blog.csdn.net/xiaoyu411502/article/details/46702391 仅用于学习&#xff01;&#xff01;&#xff01;感谢原博主&#xff01;&#xff01;&#xff01; 1、引子 以前介绍过 Sublime text 3 系列的文章&#xff0c;着重介绍了 Sublime text 3 如…

webstorm搭配Monokai-Sublime主题颜色方法

原材料官网&#xff1a;http://www.jetbrains.com/webstorm/monokia&#xff1a;https://github.com/OtaK/jetbrains-monokai-sublime 我的是汉化的中文版 相信你的英语也不会太差 找到setting 话不多说&#xff0c;直接上教程 第一步 打开https://github.com/OtaK/jetbrains-m…

webstorm主题、字体形式设置

主题&#xff1a;File->Setting->Appearance & Behavior,如下图&#xff0c;里面有三种主题可供选择&#xff0c;还有左侧菜单栏的格式设置 字体&#xff1a;File->Setting->Font,里面有多种字体供选择&#xff0c;和修改字体的尺寸。 选择完要记得点Apply,所…

webstorm修改主题色和配色

Windows 用户打开setting Mac 用户选择preferences 先讲如何选择配色 如何更换主题看这里 修改完后一定要点击apply &#xff0c;否则无效哦

Webstorm酷炫主题

先上个js最终结果图,css,html都一样色系就不抓了。 更新的 webstorm 10.0 的主题&#xff1a; 把grey_orange.rar解压后放到&#xff1a; XP:C:\Documents and Settings\Administrator\.WebIde10\config\colors win7: C:\Users\jikey(用户名)\.WebIde10\config\colors 目录…

webstorm 主题导入方法

进入 phpstorm-themes 主题下载选择喜欢的主题 (目前只确定 .icls 或 .xml 格式有效) 点击 Download 下载 在如下页面右键→另存为 注意后缀名不要写错, 点击保存 进入 C:\Users\Lenovo.WebStorm2018.1\config\colors (以自己的目录为准, colors文件夹没有的话就新建一个),…

如何让vs2019的主题变好看(NightOwl主题为例)???像vscode和webstorm一样自定义主题!!!

用C#编程毋庸置疑除了vscode就是visual studio最好用了&#xff0c;但是经典的vs主题就四个&#xff0c;我总结为“黑白灰”还有个特别丑的“高对比模式”。 用过vscode等前端开发ide的同学都知道这些ide的配色十分丰富&#xff0c;特别好看&#xff0c;我就喜欢其中一种&#…

webstorm 主题设置 皮肤设置

推荐个编辑器主题下载的一个网站。 Color Themes 网址&#xff1a;http://color-themes.com [点这里直接跳转] 但是&#xff0c;只支持几个编辑器。 各种颜色搭配的主题&#xff0c;随你选择&#xff01;我个人比较喜欢这三种~~ 一、导入下载主题 下载之后是一个 .jar文件。…

webstorm入门1-主题和配色

1、引子 以前介绍过 Sublime text 3 系列的文章&#xff0c;着重介绍了 Sublime text 3 如何下载、安装、插件、配置等内容。Sublime text 3的轻量和富扩展&#xff0c;为前端开发带来了很多的便捷&#xff0c;加快了代码的书写速度&#xff0c;尤其是配上 emmet&#xff0c;那…

寻找好看的webstorm的主题风格

网址一&#xff1a;http://color-themes.com/?viewindex 该网站里有好多不同风格主题(背景为淡绿色的比较养眼)&#xff0c;任选&#xff1b; 下载好jar包之后&#xff1b; 在webstorm里导入jar包即可&#xff1a; 网址二&#xff1a;http://www.phpstorm-themes.com/ 该网…

关于webstorm更换主题

现在我们前端使用编辑器&#xff0c;只要用习惯就好&#xff0c;不过这里推荐使用webstorm,因为被称为,js神器’的称号&#xff0c;不是白说的。 接下来我们来看下怎么引入主题。 下面有一个网站&#xff0c;这个网站的名字叫 http://www.themesmap.com/ 这个网站是JetBrain…

webstorm护眼绿柔主题分享(JetBrains都可用)

更新&#xff1a;调整了默认字体为25号&#xff0c;按Ctrl滚轮可以缩放字体。 很多朋友反应按Ctrl滚轮改不了字体&#xff0c;原因是编辑器设置不能随着主题配色一同导出&#xff0c;只能另外设置。步骤看这里。 第一步&#xff1a;点击左上角的File&#xff0c;再点击setting。…

webstorm主题设置

1、从WebStorm主题&#xff0c;下载自己喜欢的主题 如下图&#xff0c;点击鼠标右键“另存为”&#xff0c;保存&#xff08;默认为ilc格式&#xff09;。 2、根据不同的操作系统&#xff0c;将其copy到不同的webstorm安装目录中。 1.apple系统 复制下载的xml theme文件&#…

webstorm-主题和配色

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

webstorm 开发插件集合

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

WebStorm自定义主题/护眼主题

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

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

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