前回、Webpackを使用してVue.jsの環境を構築する方法を簡単に紹介させていただきましたが、インストールして実際にコーディング作業をしていく中でESlintが「Unexpected tab character」というエラーを吐き出しまくる状況に直面したので、今回はそのエラーを吐き出さないようにESlintのタブに関するルールを無効にする方法を紹介したいと思います。
ESlintとは？
ちなみに、ESlintとは、Nicholas C. Zakasという方によって2013年に開発されたオープンソースの静的解析ツールになります。ESlintとは使用することによって、jsのコードがしっかりとガイドラインに準拠しているのか、またはスペースやタブ等の使い方などをチェックしてくれます。多くの企業で採用されており、Vue.jsの公式ドキュメントでもESlintの使用が推奨されています。
「Unexpected tab character」とは？
「Unexpected tab character」とは、「予期しないタブキャラクターがありますよ」というエラーでタブを使用していると引っかかってしまいます。とは言え、使用しているエディタの設定によってはタブによるインデント機能をサポートしているエディタもあるかと思いますし、タブによるインデントを好む方も中にはいるかと思います。
ちなみに、今回の自分の場合はSublime Text3のインデント設定がタブになっていったので、このエラーが大量に吐き出される自体になりました。
「Unexpected tab character」エラーを回避する方法
では、この「Unexpected tab character」エラーをどう回避するかというと、タブの使用をやめたりエディタのインデント設定を修正すればいいだけなのですが、ESlintのタブ設定を無効にする方法もあるので、そちらを紹介しておきます。
「Unexpected tab character」を吐き出しているのは「no-tabs」というルールになるので、これを無効にしてあげればいいだけです。
Vue.jsのWebpackの場合は「.eslintrc.js」というファイルがESlintの設定に関するファイルなので、このファイルに下記のコード（“no-tabs”: 0）を追記してあげれば大丈夫です。
rules: {
// allow async-await
"no-tabs": 0, //追記するコード
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
このように設定した上で、再起動すれば「Unexpected tab character」エラーは消えると思います。
まとめ
ということで、今回はESlintの「Unexpected tab character」エラーをタブルールを無効にすることで回避する方法を紹介しました。
一応、これでタブを使用していても問題ありませんが、タブによる環境依存の問題もあるので、どちらかと言うと適宜エディタの設定等を修正した方がいいのかなと思います。
てことで、今回はここまで！また！
