Sublime Text 3でeslintのauto fixを使いたいんです。ただそれだけの自分用のメモです。インターネッツ汚してごめんなさい。
フロント、すっかり置いてけぼりです。早くて困ります。
前提
今日は2017年1月1日、元旦ってやつです。
macOS Sierra(10.12.2)でSublime Text 3のBuild 3125を使っています。
シェルはzshです。
nodejsを入れる
nodebrew派です。ほかっちゃさんあざます。
githubのreadme を見れば入れられますね。
nodebrewで自分の環境にnodejsのstableを入れました。今日は7.3.0。
あれー？去年の今頃は4系じゃなかったっけー？
$ curl -L git.io/nodebrew | perl - setup
これでホームフォルダの下に .nodebrew ってフォルダができてその下に環境ができます。
一時的にPATHを通して、stable入れます。
$ export PATH=$HOME/.nodebrew/current/bin:$PATH
$ nodebrew install-binary stable
Sublime Text3からも見えるようにPATHを通す
通常、zshを使っている場合には .zshrc にPATHを通しますが、Sublime Text3から任意のnodejsを使う場合には .zprofile に記述します（以下の例はstabelが7.3.0の場合）。
$ cat ~/.zprofile
export PATH=$HOME/.nodebrew/current/bin:$PATH
nodebrew use v7.3.0
ここをちゃんと設定しないと Sublime Text3 のコンソールに env: node: No such file or directory と出て動作しません。
Sublime Text3のコンソールは Shift+Ctrl+` かメニューから View → Show Console を選択すると表示できます。
eslintをプロジェクト環境にいれる
通常はgオプションでグローバルに入れるのでしょうが、なんとなく癖でローカルに入れます。
まずはプロジェクト（今回は適当な空っぽのフォルダ spam ）にpackage.jsonを作ります。主題ではないのでEnter連打で。
$ npm init [~/projects/spam]
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (spam)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/makoto/projects/spam/package.json:
{
"name": "spam",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes)
続いて、プロジェクトの開発環境用にeslintを入れます。
$ npm install --save-dev eslint
色々入ります。package.jsonに開発環境用のモジュールが追記されました(save-devオプションをつけたので）。
- "license": "ISC"
+ "license": "ISC",
+ "devDependencies": {
+ "eslint": "^3.12.2"
+ }
eslintの初期設定をする。
$ ./node_modules/.bin/eslint --init
よくわからないけれど、とりあえずポピュラースタイルで
? How would you like to configure ESLint?
Answer questions about your style
❯ Use a popular style guide
Inspect your JavaScript file(s)
綺麗と聞いたことのあるAirbnbスタイル
? Which style guide do you want to follow?
Google
❯ Airbnb
Standard
React使いたい！
? Do you use React? (y/N) y
よくわからないのでJavaScriptにしておく
? What format do you want your config file to be in? (Use arrow keys)
❯ JavaScript
YAML
JSON
何かが追加でインストールされた
Installing eslint-plugin-react, eslint-plugin-jsx-a11y, eslint-plugin-import, eslint-config-airbnb
package.jsonのdevDependenciesも更新されている。
- "eslint": "^3.12.2"
+ "eslint": "^3.12.2",
+ "eslint-config-airbnb": "^13.0.0",
+ "eslint-plugin-import": "^2.2.0",
+ "eslint-plugin-jsx-a11y": "^3.0.2",
+ "eslint-plugin-react": "^6.8.0"
Sublime TextのLinterパッケージを入れる
Package Controllを使って入れます。最近のSublime TextはPackage Controll自体のインストールはメニューからできるようになったのでInstall Package Controllみたいなやつを選択してインストールします。
インストールが終わったら、 Cmd+Shift+P でコマンドパレットを出して、 install package と打つと絞り込まれるのでEnterキーを押してパッケージ名を指定してインストールします。
ReactとReduxに必要なモジュール類を入れてみる
$ npm install --save react react-dom redux react-redux
$ npm install --save-dev webpack webpack-dev-server babel-cli babel-core babel-loader react-hot-loader eslint eslint-loader eslint-plugin-react babel-eslint file-loader babel-preset-es2015 babel-preset-react css-loader style-loader
airbnbのlinterがイマイチっぽい
適当なjsを開くとエラーが出たりする（動かないように見える）。
Error: /Users/makoto/projects/spam/node_modules/eslint-config-airbnb/rules/react-a11y.js:
Configuration for rule "jsx-a11y/anchor-has-content" is invalid:
Value "" is the wrong type.
どうやら eslint-plugin-jsx-a11y のバージョン2までしか対応していない模様。
- "eslint-plugin-jsx-a11y": "^3.0.2",
+ "eslint-plugin-jsx-a11y": "^2.2.3",
eslint-plugin-jsx-a11y のバージョンを2.2.3に落としてみる。
面倒臭いので一回決して全部入れ直してしまおう。
$ rm -rf node_modules
$ npm i
とりあえずLinter自体はこれで動作する。Toolsメニューの一番下にLinterメニューがあるので、デバッグモードにしたり、アイコンを変えたり色々できる。
本題のautofix
まだ無理やり動かすしかない模様
$ vi ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/SublimeLinter-contrib-eslint/linter.py
@@ -22,6 +22,7 @@ class ESLint(NodeLinter):
syntax = ('javascript', 'html', 'javascriptnext', 'javascript (babel)',
'javascript (jsx)', 'jsx-real', 'Vue Component', 'vue')
+ can_fixed_syntax = ('javascript', 'javascriptnext', 'javascript (babel)')
npm_name = 'eslint'
cmd = ('eslint', '--format', 'compact', '--stdin', '--stdin-filename', '@')
version_args = '--version'
@@ -98,4 +99,14 @@ class ESLint(NodeLinter):
elif not code:
cmd.append(self.filename)
+ if cmd.count('--fix') > 0:
+ if self.can_fixed_syntax.count(self.syntax) > 0:
+ if cmd.count('--stdin') > 0:
+ cmd.remove('--stdin')
+ if cmd.count('--stdin-filename') > 0:
+ cmd.remove('--stdin-filename')
+ code = None
+ else:
+ cmd.remove('--fix')
+
return super().communicate(cmd, code)
プロジェクトに .sublimelinterrc を追加して以下を記述。再起動するとauto fixできるようになるっぽい（メニューのTools→SublimeLinter→Lint Mode→Load/saveにする必要があるかも）。
{
"linters": {
"eslint": {
"args": ["--fix"]
}
}
}
フロントキビシー。 React + redux 書きたい人はおらんかえー