シェアありがとうございます!

【Vue.js】ESlintの「Unexpected tab character」エラーを回避する方法

 前回、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)を追記してあげれば大丈夫です。

 このように設定した上で、再起動すれば「Unexpected tab character」エラーは消えると思います。

まとめ

 ということで、今回はESlintの「Unexpected tab character」エラーをタブルールを無効にすることで回避する方法を紹介しました。

一応、これでタブを使用していても問題ありませんが、タブによる環境依存の問題もあるので、どちらかと言うと適宜エディタの設定等を修正した方がいいのかなと思います。

 てことで、今回はここまで!また!

お仕事のご相談・ご依頼
お気軽にお問い合わせください!

お仕事の依頼はこちら

著者プロフィール

Takanori Hashi

東京、奄美大島、宮崎の3拠点生活をしたい30代のおじさん。仕事の傍、子育て&趣味に精を出す一児のパパ。普段はプログラム書いたりデザインしたりWeb関連のお仕事をしています。TwitterもInstagramも基本フォローバックするのでお気軽にフォローしてください!

人気記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です