您的位置:首页 > Web前端 > React

sublime配置ESLint_Linting React/JSX and ES6 Javascript with Eslint in Sublime Text 3

2017-11-24 20:59 597 查看
A few weeks ago, I wrote a blog on how to setup
ST3 for React dev. Since then, I learned more about react development, I started to use eslint. Jslint is great but it does not support JSX. We need a linter that can be integrated with ST3 and show live linting result while coding. This is where eslint comes
in.


Install eslint

You can install it either globally or locally. I installed it globally:

npm install -g eslint eslint-plugin-react


The only hiccup to start using eslint is its stunning numbers of configurable options available. I have included a.eslintrc
file to get your started(Just copy and paste this code your your .eslintrc file). The majority of this file is based on this
example and this
project. I added/modified the following:

Enable JSX linting via eslint-plugin-react

Enable ES6 syntax

Enable ES6 module import and export

Use single quote instead of double quote around strings (you can always change this by replacing
"quotes":
[1, "single"]
 with 
"quotes":
[1, "double"]
. Just search for the 
quotes
 keyword.

A note about eslint's syntax, eslint use 0, 1 and 2 to represent:

0 - disable the rule

1 - display warning when a rule is violated

2 - display error when a rule is violated

You can always look
up a eslint setting here.


Enable eslint in Sublime Text 3 (ST3)

Make sure SublimeLinter3 is
installed first.

Install SublimeLinter-eslint

Make sure you have a .eslintrc file in your current project's root folder. Open up the project folder in sublime and wait for a few seconds for eslinter to kick in.


[Optional] Disable jshint in ST3

If you also have sublime-jshint installed, you want to disable it otherwise both jshint and eslint will lint your project. To do this, inside ST3, save your project by (Project -> Save project as ...). This will create a .sublime-project file, inside this file,
put the following config inside:

{

"SublimeLinter":{
"linters":{
"eslint":{
"excludes":[
"dist/*",
"node_modules/*"
]
},
"jshint":{
"@disable":true
}
}
}
}


This config tells SublimeLinter to:

disable jshint

tell eslint to ignore your 
dist
 and 
node_modules
 folder


Note

Whenever you modify the .eslintrc file, it will NOT take
effect unless your restart ST3.
Also, when ST3 is opened, it will not respond to any user input for a few seconds because eslint is working in the background linting your files.

来源:http://cheng.logdown.com/posts/2015/09/15/linting-react-jsx-and-es6-javascript-with-eslint
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: