当你在使用 ES6+ 书写前端代码的时,eslint 是必备的代码校验器。
下面为你介绍在 sublime text 3 编辑器中配置 eslint 的方法步骤。
1. 安装 eslint
打开 cmd 命令提示符,使用 node 进行全局安装 eslint
npm i eslint -g –registry=http://registry.npm.taobao.org/ –disturl=https://npm.taobao.org/dist
npm i babel-eslint -g –registry=http://registry.npm.taobao.org/ –disturl=https://npm.taobao.org/dist
如果你使用 react.js 框架,还应当安装 eslint-plugin-react 插件:
npm i eslint-plugin-react -g –registry=http://registry.npm.taobao.org/ –disturl=https://npm.taobao.org/dist
2. 安装 sublime text 相关插件
打开 sublime text,打开 preferences->Package Control (ctrl+shift+l),搜索和安装如下两个插件:
SublimeLinter
SublimeLinter-eslint
3. 初始化校验配置
进入项目根目录,新建一个名称为 .eslintrc 的文件,录入相关配置。
或者 cmd 命令提示符中进入项目根目录,执行如下命令,初始化生成一个 .eslintrc 文件:
eslint –init
通过以上步骤即完成对 sublime text 的 eslint 配置。
如遇到更多的问题,欢迎留言交流。
附:
一份 .eslintrc 参考(如项目代码均在D盘,可以将它建立在D盘根目录):
{ //ignored some files "parser": "babel-eslint", "env": { "browser": true, "node": true, "es6": true }, "globals": { "jest": true, "describe": true, "it": true, "expect": true, "$": true, "require": true, "define": true, "module": true, "MZ": true, "console": true, "window": true }, "rules": { //0 关闭,1 警告,2 错误 "block-scoped-var": 0, //把 var 语句看作是在块级作用域范围之内 "curly": 1, //为所有控制语句指定花括号约定,警告 "eol-last": 0, //强制文件最后一行为空行,关闭 "eqeqeq": 1, //- 要求使用 === 和 !== "dot-notation": 2, //尽可能的使用点符号 "no-console": 0, //不允许存在 console。关闭 "no-empty": 1, //空的代码块 "no-multi-spaces": 1, //不允许多个空格 "no-self-compare": 1, //禁止自身比较 "no-shadow": 2, //定义的变量不允许已在外层作用域定义 "no-undef": 2, //变量未定义 "no-underscore-dangle": 0, //禁止标识符中有悬空下划线。关闭 "no-unused-expressions": 1, // 禁止在语句的位置使用表达式 "no-unused-vars": 2, //变量定义后未使用 "no-use-before-define": 1, //不允许在变量定义之前使用它们 "quotes": [0, "single", "avoid-escape"] //使用单引号 }, "extends": "eslint:recommended", "ecmaFeatures": { "jsx": true, "experimentalObjectRestSpread": true }, "plugins": [ "react" ] }
4. 相关参考
http://blog.csdn.net/lj745280746/article/details/49658249
https://github.com/roadhump/SublimeLinter-eslint
http://smocean.github.io/
http://eslint.org/