文档章节

Sublime Text Plugins — Web Fundamentals

cyper
 cyper
发布于 2015/08/28 02:52
字数 778
阅读 83
收藏 2

The minute you start developing a site, the first tool you’ll use is a text editor, whether it’s as simple as notepad or a full blown IDE.

In this episode Addy & Matt look at their collection of plugins for Sublime Text and discuss how each one helps with their workflow.

Package Control

To get the packages (or plugins) referenced in the episode, you need to install Package Control, it’s nice and simple to install and you can find instructions on how to do so here.

JSHint

JSHint is a JavaScript linter which examines your JavaScript and highlights any possible errors or bad practices in your code.

For exmample, if you accidentally typed a variable name wrong, like below, then JSHint will point out that fo was never defined and is going to cause an error.

var foo = { bar: 'Hello, World.' };
var msg = fo.bar;

The JSHint plugin points out issues the by displaying a yellow box around the relevant text and placing your cursor in that bit of code will result in an error message being shown in the bottom left of Sublime.

Other issues it’ll catch are:

  • Variables which are defined but never used
  • Avoiding creating functions inside of loops
  • Using the right comparison methods

To install the SublimeLinter-JSHint Package you’ll need to also install the SublimeLinterpackage and follow the installation instructions on the SublimeLinter-JSHint Package page.

Some developers may find it helpful to include the JSHint Gutter plugin as well. It places a small dot in the gutter of any line with a JSHint issue.

JSCS

JSCS will highlight any places where your JavaScript isn’t following a specific coding style.

For example, JSCS can be used to define whether spaces should be used after keywords, like ‘if’, or defining whether curly braces should be on the same line or new line of a method.

The SublimeLinter-JSCS package highlights any issues inline in a similar style to JSHint making it easy to correct any problems.

This is extremely helpful when it comes to working in a team as everyone can follow the same styleguide and keep your code consistent.

The best bit is, with the JSCS-Formatter package you can automatically fix any issues on the page by pressing ctrl + shift + p, typing ‘JSCS Formatter: Format this file’ and pressing enter. You learn more in Addy’s blog post.

Color Highlighter

Color highlighter will add a color to the background of any color definitions in your CSS or Sass.

You can define whether it shows as an underline with a full background when you hover over it or always displays color on the definition background. Just go to ‘Package Settings’ > ‘Color Highlighter’ > ‘Settings - Default’ to see the initial settings and alter your settings in ‘Settings - User’.

For full background highlighting add the following to the ‘Settings - User’ file:

{
  "ha_style": "filled"
}

Gutter Color

Gutter Color is an alternative to color highlighter, instead of showing the color on top of the color variable, it puts the color in the gutter of that line.

Color Picker

If you ever need a quick and easy way to select a color from your screen then the Color Picker Package may be for you.

Press ctrl + shift + c and boom - you got yourself a color picker.

AutoFileName

AutoFileName is a simple little plugin which gives you a list of possible files as you type. This is super handy if you’re trying to type out an image name or add a CSS or JS file as it saves you time and more importantly reduces the risk of typos.

Autoprefixer

We’ve all had that moment of realisation where we’ve forgotten to add a prefixed CSS property. With Autoprefixer you simple run it on your CSS and it’ll add all the prefixes you need.

It means we go from this..

.container-thingy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

..to the following, just by hitting ctrl + shift + p and typing ‘Autoprefix CSS’ and hitting enter.

.container-thingy {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

You can also define what browsers and browser versions you would like to support in the package settings. Checkout the Package Control page for more info.

More…

There are a tonne of other plugins that exist for Sublime Text, so be sure to explorePackage Control.

For more advice and tips, you should checkout WesBos’s great slide deck on keyboard shortcuts and other plugins for Sublime Text.

WesBos has also written a book titled ‘Sublime Text for the Power User’ which may be of interest to you wonderful people as well :)

本文转载自:https://developers.google.com/web/shows/ttt/series-1/sublime-text-plugins

cyper

cyper

粉丝 59
博文 685
码字总数 143352
作品 0
武汉
前端工程师
私信 提问
加载中

评论(3)

cyper
cyper 博主
注意手动复制pyv8文件到。。。/Users/cyper/Library/Application Support/Sublime Text 3/Installed Packages/PyV8/osx-p3/
cyper
cyper 博主
外加emmet插件: 如果打开的时候卡在loading pyv8这一步。手动安装pyv8: https://github.com/emmetio/pyv8-binaries
cyper
cyper 博主
外加handlebars插件。
Sublime Text 2 注册码/破解方法

Sublime Text 2 是一款非常不错的代码编辑器,特别是UI界面和速度。但这也意味着这款软件的售价达到了50美元左右。虽然它也是一款免费的软件,但免费版的会不定期弹出 付费购买页面。最近在网...

iTeacher
2013/04/13
448
2
专为前端开发者准备的 15 款优秀的 Sublime Text 插件

Sublime Text 已成为了目前最流行的代码编辑器之一。它的反应速度、简单易用性以及丰富的插件生态,让众多前端开发者们为之倾倒。 为了帮助开发者们更便捷地使用 Sublime Text ,我们决定制作...

IT程序狮
2018/12/17
0
0
ubuntu下破解sublime text 2

目前最新版本的Sublime Text2破解方法:将sublimetext复制一份改名为sublimetext_cracked,只要名字不一样就可以了,用二进制方式打开,这里我用vim。 vim -b sublimetextcracked 然后执行:%!...

随影求是
2013/10/21
113
0
[安装配置] 我的 Sublime Text 2/3 配置

初始化于: 2013-06-30 Sublime Text is a sophisticated text editor for code, markup and prose. You'll love the slick user interface, extraordinary features and amazing performance......

豆仔
2012/12/08
507
0
Ubuntu下Sublime Text 3解决无法输入中文的方法

环境: Ubuntu14.04 搜狗输入法 for Linux Sublime text 3 提示:编译请在非root下进行 本经验目前在Ubuntu14.04环境下,已有搜狗输入法 for Linux和Sublime Text 3的情况下安装成功。 保存下...

zhangsirsdo
2014/11/04
912
0

没有更多内容

加载失败,请刷新页面

加载更多

CSS--列表

一、列表标识项 list-style-type none:去掉标识项 disc:默认实心圆 circle:空心圆 squire:矩形 二、列表项图片 list-style-img: 取值:url(路径) 三、列表项位置 list-style-position:...

wytao1995
今天
6
0
linux 命令-文本比较comm、diff、patch

本文原创首发于公众号:编程三分钟 今天学了三个文本比较的命令分享给大家。 comm comm 命令比较相同的文本 $ cat charabc$ cat chardiffadc 比如,我有两个文件char和chardiff如上,...

编程三分钟
今天
7
0
QML教程

https://blog.csdn.net/qq_40194498/article/category/7580030 https://blog.csdn.net/LaineGates/article/details/50887765...

shzwork
今天
5
0
HA Cluster之5

对于使用heartbeat v2版的CRM配置的集群信息都是保存在一个名为cib.xml的配置文件中,存放在/var/lib/heartbeat/crm/下。CIB:Cluster Information Base,由于xml文件配置不是那么方便,所以...

lhdzw
今天
6
0
玩转Redis-Redis基础数据结构及核心命令

  《玩转Redis》系列文章主要讲述Redis的基础及中高级应用,文章基于Redis5.0.4+。本文主要讲述Redis的数据结构String,《玩转Redis-Redis基础数据结构及核心命令》相关操作命令为方便对比...

zxiaofan666
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部