Sublime Text内运行javascript(ES6)及代码检查

运行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"
}

或者如下:

{
    "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"]
    }
}

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

$ npm install -g babel
{
    "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\""]
    }
}

说明

在以上的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"]

或者

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

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

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

{
    "cmd": ["node", "$file"],
    "selector": "source.js"
}

使用
在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关掉,否则报一堆警告错误。

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/fengzijinliang/article/details/52350410
个人分类: 脚本语言-js-sh
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

Sublime Text内运行javascript(ES6)及代码检查

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭