sublime text 3 插件 【编写高质量 JavaScript & CSS 代码】高亮提示用户编写的代码中存在的不规范和错误的写法

作为一个高逼格的前端开发者，自然编辑器的高大上决定了我们码代码的速度;sublime作为轻型的开发编辑器,一直以来都以简洁,占用空间小,启动速度快,主题鲜明等 广为开发者所喜爱;

今天给大家介绍一款sublime 一个强大的插件，叫 SublimeLinter ，这款插件是为了更好的编写高质量 JavaScript & CSS 代码，因为它可以 高亮提示用户编写的代码中存在的不规范和错误的写法；诸如在webstorm中，代码写错了 软件可以自动提醒哪里出了问题，但是在sublime中，软件却并没有带有这个功能，就需要收到的配置；
但是在配置之前，先给小伙伴们介绍一款界面优美的主题界面。
附上url的链接：boxy主题源地址（主题在页面中下方的位置）；


// Activation
"color_scheme": "Packages/Boxy Theme/schemes/Boxy Tomorrow.tmTheme",
"theme": "Boxy Tomorrow.sublime-theme",
// Settings
"theme_accent_numix": true,
"theme_autocomplete_item_selected_colored": true,
"theme_dropdown_atomized": true,
"theme_find_panel_materialized": true,
"theme_grid_border_size_xs": true,
"theme_popup_border_visible": true,
"theme_quick_panel_border_visible": true,
"theme_quick_panel_item_selected_colored": true,
"theme_scrollbar_colored": true,
"theme_scrollbar_line": true,
"theme_sidebar_disclosure": true,
"theme_tab_selected_transparent": true,
"theme_tab_selected_underlined": true,
"theme_tab_size_lg": true,
"theme_unified": true,

接下来在sublime安装这个主题：
1.按下 Ctrl+Shift+p 进入 Command Palette
2.输入install进入 Package Control: Install Package
3.输入boxy,选中第一个进行安装.

安装完之后，在Preferences->settings 在页面中将下面的代码copy进去

{
"color_scheme": "Packages/Boxy Theme/schemes/Boxy Tomorrow.tmTheme",
"font_size": 12,
"ignored_packages":
[
"Vintage"
],
"theme": "Boxy Tomorrow.sublime-theme",
"theme_accent_numix": true,
"theme_autocomplete_item_selected_colored": true,
"theme_dropdown_atomized": true,
"theme_find_panel_materialized": true,
"theme_grid_border_size_xs": true,
"theme_popup_border_visible": true,
"theme_quick_panel_border_visible": true,
"theme_quick_panel_item_selected_colored": true,
"theme_scrollbar_colored": true,
"theme_scrollbar_line": true,
"theme_sidebar_disclosure": true,
"theme_tab_selected_transparent": true,
"theme_tab_selected_underlined": true,
"theme_tab_size_lg": true,
"theme_unified": true
}

保存之后，查看 Preferences->Package Settings->Boxy Theme说明boxy主题安装成功；

接下来就要安装今天的大头SublimeLinter插件，此款插件是检查代码语法是否有错误，对于用惯了代码自动纠错的编辑器软件，没有的话,是不是特别不喜欢呢；
安装此软件一样要到Package Control 中
1.按下Ctrl+Shift+p进入 Command Palette
2.输入install进入 Package Control: Install Package
3.输入SublimeLinter进行安装.

安装成功之后，sublime界面上会出现

Welcome to SublimeLinter, a linter framework for Sublime Text 3........(省略部分显示)

因为此插件不是sublime 自带的插件功能，所以，需要手动安装才可以;
SublimeLinter-jshint 是基于 nodeJS 下的 jshint 的插件，实际上 SublimeLinter-jshint 调用了 nodeJS 中 jshint 的接口来进行语法检查的.

一:安装“`SublimeLinter-jshint“`

1.按下Ctrl+Shift+p进入 Command Palette
2.输入install进入 Package Control: Install Package
3.输入SublimeLinter-jshint进行安装.
安装成功后,会显示

SublimeLinter-jshint  -------------------------------  This linter plugin for SublimeLinter provides an interface to jshint.....(省略部分显示)

二:安装nodeJS 和jshint

(1)安装nodeJs ;首先需要先安装node.js,请自行到官网下载安装成功即可;node.js的下载安装链接如要查看是否安装成功,Win+R,运行cmd后,node -version.查看版本号即可;
node.js的现在地址: https://nodejs.org/en/download/
(2)通过npm 安装jshint
在命令行下输入代码:
npm安装:
npm install -g jshint
查看jshint版本号:
jshint -version

顺利完成到这里.恭喜你.我们现在已经可以使用 Sublime 编辑 JavaScript 文件，就会有语法检查了！
如下:

此处 balabala()后面没有, 所以第二行前面就会出现报错的提示的黄色信号,而且在编辑器的左下角也有(Error:Missing semicolon,Line 2,Column 15)的报错提示;

安装好js的代码提示错误之后,接下来就是安装css的代码提示了,方法和前面的类似:
sublimeLinter-csslint也是基于 nodeJS 下的 csslint 的插件，实际上 SublimeLinter-csslint 调用了 nodeJS 中 csslint 的接口来进行语法检查的。
同样的方法:
1.按下Ctrl+Shift+p 进入 Command Palette
2.输入install进入 Package Control: Install Package
3.输入SublimeLinter-csslint。进行安装.

成功安装完SublimeLinter-csslint 之后,接下来就是通过node.js 的npm来安装csslint;
1.Win+R,运行cmd后 ,安装:
npm install -g csslint;
2.Win+R,运行cmd后,查看csslint的版本号:(此处注意查看版本号的时候,一定是”–version”,因为此处识别不了”-v” 这个版本号)
csslint --version ;

至此,全部完成插件的安装,现在不用在担心在你的sublime中运行代码的时候,代码不会提示报错了;这给你的开发纠错带来了很大的帮助,也使得开发效率大大的增加;
还在犹豫什么?赶快行动嘛~代码改变世界~