WebStorm左侧菜单栏

webstorm是一款前端IDE利器,个人感觉黑色的背景比较炫酷,刚开始从网上下载的主题只能修改编辑窗口的背景色,经过查询资料终于把左边菜单栏的背景色也修改了。

第一步:点击"file --> settings",如下图所示:

第二步:选择appearance->Theme选择darcula(黑色主题)

在 IDE Settings > Appearance 的右边菜单里,选择 Theme > Darcula主题即可。IDE Settings 指的是 webstorm 的全局配置。

ps:在Appearance下设置的字体是菜单栏的字体

编辑器的字体设置如下:

新建Scheme + 修改字体
ctrl+alt+s打开Settings界面,Editor > Colors&Fonts >
Font。
Default scheme是亮色调,但我想定制一套暗背景的环境,所以在右侧Scheme name下拉框中选择Monokai,以此作为修改的基础,然后点击Save as,给自己新建的Scheme起个名字吧,如下图:

这里面可以设置字体(我一般选择Consolas),字体大小,行间距。

自定义语法高亮
用ctrl+alt+s打开Settings界面,Editor > Colors&Fonts。

不同语言有各自的语法高亮规则,但有一部分是通用的(General),我们首先来设置General,然后再根据需要设置不同语言的语法高亮。
General的设置
普通文本:default
text
折叠文本: Folded
text
光标: Caret
光标所在行: Caret
row
行号: Line
number
TODO: TODO default
光标下变量高亮:Search
result
搜索结果:Text
search result
匹配的括号:Matched
brace
不匹配的括号:Unmatched
brace
未使用的符号:Unused
symbol
左边空隙(行号,断点):Gutter
background
选中的文本背景色:Selection
background
选中的文本前景色:Selection
foreground

区分语言的设置
举例来说,如果要更改Javascript的语法高亮,就在上图中选择Javascript,然后再进行详细设置。具体设置项就不赘述了。

显示行号 + 自动换行
如果用Vim编程,行号是非常必要的辅助。WebStorm默认是不显示行号的,没关系,显示行号非常的容易。
只要在代码左侧的gutter区域点右键,就会出现下图的菜单:勾选上Show Line Numbers即可。

另外,勾选上图中的Use
Soft Wraps就启用了WebStorm的自动换行的功能,即过长的代码行不会超出屏幕,不会出现横向的滚动条。
值 得一提的是,标准的Vim,jk是移到上一行下一行,如果代码自动换行了,被分割成的两行虽然看起来是两行,但其实是一个逻辑行,这时候用jk是上移下移 一个逻辑行。这种情况下,如果要从同一逻辑行的“第一行”移动到“第二行”,需要按gj,即先按g再按方向。虽然Vim提供了这个方法,但还是经常按错。
好消息是,启用了Use
Soft Wraps的WebStorm不需要这样,直接按j就可以从同一逻辑行的“第一行”移动到“第二行”。

导入导出设置
File > Export Settings导出用户设置。如下图,你可以选择要导出哪些类型的设置,也可以选择导出到哪个目录下。
导出后的配置以jar包的形式存在,导入也同样简单,File > Import
Settings,选择jar包导入成功后,重启WebStorm就大功告成了

激动方式:http://www.cnblogs.com/gkl2013/p/6740779.html

WebStorm设置左侧菜单栏背景和字体设置的更多相关文章

  1. 开发工具idea背景及字体设置

    背景设置: 按两下shift,在搜索框里输入set Background Image,选择set Background Image,如图所示: 设置图片的路径和透明度,如图所示: ★ 注意:idea ...

  2. WebStorm设置左侧菜单栏背景色和样式

    WebStrom一直以来都是默认的白色主题,今天想修改了下主题皮肤,结果导致左侧项目资源栏和顶部菜单栏也变成了黑色,结果无法改变回来,网上查了各种帖子,居然也没找到解决方法,自己研究了半天,终于搞定了 ...

  3. QQ空间HD(4)-设置左侧菜单栏属性

    DJHomeViewController.m #import "DJHomeViewController.h" #import "DJMenuView.h" ; ...

  4. 设置QPushbutton按钮背景、鼠标滑过状态、鼠标点击后状态用法

    1.1当要设置QPushbutton按钮背景,字体颜色,鼠标滑过状态,鼠标单击后状态时,可以用QSS来设置,具体的代码如下:     QPushButton *allSelect = new QPus ...

  5. Android开发之字体设置

    默认字体 Android SDK自带了四种字体:"normal"“monospace",“sans”, “serif”,如下:   字体 看这四兄弟长的还是蛮像,我是看不 ...

  6. Emacs Org-mode中英文字体设置

    Emacs Org-mode中英文字体设置 Table of Contents 1. 缺省字体存在的问题 2. 解决方法 2.1. 环境说明 2.2. 思路和方法 2.3. emacs设置代码 2.4 ...

  7. CSS之背景设置、字体设置、文本设置

    <html> <head> <meta charset="utf-8"> <title>单行文本框与多行文本框</title& ...

  8. Eclipse的中文字体设置

    打开eclipse中文字体很小,简直难以辨认.在网上搜索发现这是由于Eclipse 用的字体是 Consolas,显示中文的时候默认太小了.解决方式有两种:一.把字体设置为Courier New  操 ...

  9. 【转】iOS中设置导航栏标题的字体颜色和大小

    原文网址:http://www.360doc.com/content/15/0417/11/20919452_463847404.shtml iOS中设置导航栏标题的字体颜色和大小,有需要的朋友可以参 ...

随机推荐

  1. 详解JDBC连接数据库

    一.概念 1. 为了能让程序操作数据库,对数据库中的表进行操作,每一种数据库都会提供一套连接和操作该数据库的驱动,而且每种数据库的驱动都各不相同,例如mysql数据库使用mysql驱动,oracle数 ...

  2. Robot Framework 关键字自定义

    关键字自定义有三种方法: 1.在自动化目录中右键-->New User Keyword 2.选中case中的步骤(可选多行),右键-->Extract Keyword 3.自己写模块,自定 ...

  3. No module named machinery

    py2exe模块0.9版本只支持python3以上,要想在python2.7中运用,就要下载0.6 版本的py2exe http://sourceforge.net/projects/py2exe/f ...

  4. webpack 安装流程

    我最近想看看wabpack,然后就面临着安装的问题,说实话,我一点也不懂cmd,怎么还需要用cmd安装呢.其实看教程上说可以在npm上安装,但是我打开npm总是出现闪退,所以我就选择了cmd 安装的过 ...

  5. Json 与GeoJson

    1.JSON介绍 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.简单地说,JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后 ...

  6. TensorFlow anaconda命令备忘

    [查看tensorflow安装的版本] anaconda search -t conda tensorflow [选择版本安装] conda install -c anaconda tensorflo ...

  7. python遍历一个目录,输出所有文件名

    python遍历一个目录,输出所有文件名 python os模块 os import os  def GetFileList(dir, fileList):  newDir = dir  if os. ...

  8. 译:Missing index DMV的 bug可能会使你失去理智---慎重看待缺失索引DMV中的信息

    注: 本文译自https://www.sqlskills.com/blogs/paul/missing-index-dmvs-bug-that-could-cost-your-sanity/ 原文作者 ...

  9. icheck样式绑定与翻页保持

    官方文档:http://icheck.fronteed.com/ 使用基本样式 $('input').iCheck({ checkboxClass : 'icheckbox_square-blue', ...

  10. 简单实用的JQuery弹出层

    效果: 初始状态时滚动条是可以滚动的 弹出层出现之后:1.弹窗始终居于整个窗口的中间 2.滚动条不可滚动 实现代码: HTML代码: <div class="container&quo ...