千里の道も1commitから

関西在住のWebエンジニアです。長らくブログをサボっていたので、1日1記事、1commitを目標にゆるりと頑張ります。積み重ねが研鑽となると信じて

プロジェクトにeslint導入する

自分は後からでいいやとついついサボりがちになるのだが、こーゆーのは元が肝心のよう。 同僚曰く緩めるのはいつでもできるけど、キツくするのは慣れない。面倒なことは自動化するが良い。だと。金言

ESLintとは

コードの静的解析ツールの一つです。最近は脳筋で入れています。スタイルガイドも揃ってる eslint.org

ルールを決める

最初は既存のルールに則るべし。間違って自分で設定なんてした日にゃ、メンテに時間をとられてしまいます。 -> 足りなくなって自分で設定しだすとそれは猛者 それはプロジェクトに合わなくなった時に考えましょう aribnbはキツくて辛かったので、JavaScript Standard Styleが割とゆるふわで良さげ

How to Set up

# プロジェクト作成
express --hbs eslint-study
cd eslint-study
npm install

eslintの導入方法わからない?自分も何度やってもわからないですw そんな時は以下のコマンドがおすすめです。チェックに合わせて .eslintrc.js を作成してくれます github.com

npx eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? CommonJS (require/exports)
? Which framework does your project use? None of these
? Does your project use TypeScript? No
? Where does your code run? Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Standard: https://github.com/standard/standard
? What format do you want your config file to be in? JavaScript

pacage.jsonにコマンドを追加して

  "scripts": {
    "start": "node ./bin/www",
    "lint": "node_modules/eslint/bin/eslint.js '**/*.js' --ignore-pattern node_modules/",
    "lint-fix": "node_modules/eslint/bin/eslint.js \"**/*.js\" --ignore-pattern node_modules/ --fix"
  },

Go!Go!Go!

npm run lint
npm run lint-fix

自動化は後日...

1日1コミット

study-lint/eslint-express at master · gonta616/study-lint · GitHub

参考