Sublime Text内运行javascript(ES6)及代码检查_sublime text能不能运行js代码?

运行javascript

前言
调试js代码经常是在浏览器中完成的, 如果编辑器也能完成部分的调试工作, 那我相信前端和node的世界将美好很多. OK, 先上图:

实现

1. 列表内容

首先安装nodejs
当然你可以使用其它诸如jsc之类的环境来运行js, 本文使用的是nodejs. 首先确保你的电脑已经安装好nodejs, 并已将其添加到环境变量中 (一般安装时自动添加或者询问是否添加)

1. 添加build system

在sublime text中依次打开Tools -> Build System -> New Build System… 粘贴以下代码后保存(如Node.sublime-build), 然后把Build System设成Automatic

{
    "cmd": ["node", "--use-strict", "--harmony", "$file"],
    "selector": "source.js"
}
1
2
3
4

或者如下：

{
    "cmd": ["node", "$file"],
    "file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)",
    "working_dir": "${project_path:${folder}}",
    "selector": "source.js",
    "shell": true,
    "encoding": "utf-8",
    "windows": {
        "cmd": ["taskkill /F /IM node.exe >nul 2>nul & node", "$file"]
    },
    "linux": {
        "cmd": ["killall node; node", "$file"]
    },
    "osx": {
        "cmd": ["killall node >/dev/null 2>&1; node $file"]
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

或者如果你安装了babel也就是es6语法，可以这样：

$ npm install -g babel
1

{
    "working_dir": "${project_path:${folder}}",
    "selector": "source.js",
    "encoding": "utf-8",
    "shell": true,
    "windows": {
        "cmd": ["taskkill /f /im node.exe >nul 2>nul & babel-node \"$file\""]
    },
    "osx": {
        "cmd": ["killall node >/dev/null 2>&1; babel-node \"$file\""]
    },
    "linux": {
        "cmd": ["killall node >/dev/null 2>&1; babel-node \"$file\""]
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

说明

在以上的build文件中(Node.sublime-build), node是执行命令, –harmony和–use-strict是执行参数, $file是当前文件名, 所以一次build操作实际上相当于在命令行中执行了node –use-strict –harmony filename. –harmony表示启用ES Harmony features, 而这些features目前只能在strict模式下运行, 所以需要同时添加use-strict参数(详见what-is-extended-mode).
其实网上有很多教程，但是不少朋友说有点小问题，
比如一定要选择刚才新建的 javascript 编译系统才能执行。
其实是因为网上很多地方把 “selector”: “source.js”, 写成了 “selector”: “source.javascript”,
这样他就不能根据 后缀名 自动选择编译系统了。
还有很多人运行后得到的结果是乱码，其实这个问题确实不容易解释。。
但是我可以告诉你怎么调。
看到 “encoding”: “utf-8”, 这个了吧，现在是 utf-8 如果你遇到乱码的情况，改成 gbk 即可。
或者将cmd命令参数改一下：

"cmd": ["taskkill", "/f", "/im node.exe", ">nul", "2>nul", "&", "babel-node", "$file"]
1

或者

"cmd": ["taskkill", "/f", "/im node.exe", ">nul", "2>nul", "&", "babel-node", "$file"]
1

还有就是window运行的文件路径中不能有中文字符。

如果不想启用es6的特性,把build文件更改成以下代码保存即可.

{
    "cmd": ["node", "$file"],
    "selector": "source.js"
}
1
2
3
4

使用
在sublime test中新建一个test.js文件, 然后输入你的测试代码, 比如:

for (let i = 0; i < 3; i++) {
console.log(‘i:’, i);
}
使用快捷键ctrl + b, 将得到以下执行结果:

i: 0
i: 1
i: 2
[Finished in 0.1s]
注: 文件必须是存在于磁盘中的, 而不是untitled的, 否则sublime无法找到相应的文件.

以上.

摘自：https://segmentfault.com/a/1190000002291126
http://www.cnblogs.com/52cik/p/sublime-runjs.html
http://www.cnblogs.com/52cik/p/sublime-text-run-es6.html
http://www.tuicool.com/articles/jM7j6jM

代码检查

1.首先安装SublimeLinter、SublimeLinter-jshint、SublimeLinter-jsxhint、SublimeLinter-contrib-eslint插件。

2.然后命令行全局安装

npm install -g eslint
npm install -g babel-eslint
npm install -g eslint-plugin-react
npm install -g jsxhint
3.以ES6语法检查为例，在项目工程根目录新建.eslintrc,输入

{
“parserOptions”: {
“ecmaVersion”: 6,
“sourceType”: “module”,
“ecmaFeatures”: {
“jsx”: true
}
},
“rules”: {
“semi”: [“error”, “always”]
}
}
详细配置参考 http://eslint.org/docs/user-guide/configuring

4.打开Sublime3，菜单->Tools->SublimeLinter->Toggle Linter…就可以打开js、jsx、es6检查规则。注意：当使用es6开发时务必把jshint关掉，否则报一堆警告错误。