🚀
ESLintとは？
今回の内容
いつもLinuxの環境構築などでお世話になってるここのサイトから今日はESLintについて勉強したいと思います( ･ω･ )/
ESLintってなんぞ
ESLintとは
- いくつかある記述方法から決めたルールを設定する。
- それに違反しているかどうかを自動で検出(リント)・訂正(フォーマット)してくれる。
- aka. リンター
- プラグインでチェックできる項目を増やせる。
人によって記述がバラバラになってしまうルールを統一することでチームでの開発時にはとても役に立つアイテム(⑅•ᴗ•⑅)ｱﾘｶﾞﾀｲ
使ってみる
インストール
global install
sudo npm install -g eslint
★npmはNode.jsインストール時に一緒にインストールされる
local install
mkdir sample # ディレクトリ作成
cd sample # ディレクトリに移動
npm init -y # 初期化
npm install eslint --save-dev #インストール
上のコマンドを実行すると、package.jsonのdevDependenciesにEslintが追加される。
☆ --save-dev はローカルインストールするためのコマンド
☆ 正確に言うと npm install -gがグローバルインストールのコマンドで、
-gを付けないとローカルインストール
初期設定
npm init @eslint/config
コマンドを実行すると対話形式で設定する画面になる(`·⊝·´)
↓
質問 1
? How would you like to use ESLint? （ESLintをどのような用途で使用しますか？）
---------------------------------------------------------------------
選択肢
To check syntax only（構文のみ）
To check syntax and find problems（構文をチェックし、かつ問題を見つける）
To check syntax, find problems, and enforce code style（構文をチェックし、問題を見つけ、コード様式を適用させる）
質問2
? What type of modules does your project use?（プロジェクトでどのタイプのモジュールを使いますか？）
---------------------------------------------------------------------
選択肢
JavaScript modules (import/export)（ES2015のimport/export）
CommonJS (require/exports)（CommonJSのrequire/exports）
None of these（その他）
質問3
? Which framework does your project use? （プロジェクトではどのフレームワークを使っていますか？）
---------------------------------------------------------------------
選択肢
React
Vue.js
None of these
質問4
? Does your project use TypeScript?（プロジェクトでTypeScriptを使っていますか？）
---------------------------------------------------------------------
TypeScriptを使用する場合はyを入力!
（y/N）
質問5
? Where does your code run?（コードはどこで実行されますか？）
---------------------------------------------------------------------
コードの実行場所は、ブラウザーかNode(サーバーサイド)のどちらか?
Browser
Node
質問6
? How would you like to define a style for your project?（プロジェクトのスタイルをどのように定義しますか？）
---------------------------------------------------------------------
Use a popular style guide（人気のあるスタイルガイド）
Answer questions about your style（質問に答えていきスタイルを決定する）
Inspect your JavaScript file(s)（JavaScriptのファイルを参照する）
(質問6でguide（人気のあるスタイルガイド）を選択した場合)
(質問7)
? Which style guide do you want to follow? （どのスタイルガイドに従いますか？）
---------------------------------------------------------------------
選択肢
Airbnb（人気なのはこちらです。）
Standard（一般的なガイド）
Google（Googleのガイド）
質問8
? What format do you want your config file to be in? （設定ファイルをどの形式にしますか？）
---------------------------------------------------------------------
ファイルの形式。書きやすさなどの点からJavaScriptを選ぶことが多い模様。
選択肢
JavaScript
YAML
JSON
質問9
? Would you like to install them now with npm? (設定した内容をnpmでインストールしますか？
---------------------------------------------------------------------
質問1-8で設定した内容をnpmでインストールして大丈夫かどうかの確認。
問題がなければ`Yes`！
長いですね、ご苦労様ですᕙ( ˙-˙ )ᕗ
フォーマットの実行
ESLintを実行するために以下のコマンドを実行
npx eslint [ファイル名]
修正
ESlintでファイルを修正する時は以下のコマンドを実行
npx eslint [ファイル名] --fix
以上、ESLintについてでした( ⁎ᵕᴗᵕ⁎ )❤︎
実際にターミナル操作をやってみたいな〜という方はここのサイトで実際にやってみるのがいいかと( •̀ω•́ )/
実際に仮想環境でコマンドをじゃんじゃん叩けるのでパソコンが壊れる心配がなくて良き★
コース全体はこんな感じ
Discussion