static-analysis-test v1.0.5

静的解析自動化

フロントエンド共通静的解析ルールを策定いたしました。
ルールは随時アップデートしていきたいと思いますので、ご意見・ご要望等お待ちしております。

• 静的解析導入対応表
  https://docs.google.com/spreadsheets/d/1AwzanajTgO9n0SHNuDSwHDLZfByM4fsLmy_dumHlpF4/edit#gid=1444073668

事前準備

• VS Codeのプラグイン【Prettier - Code formatter】が入っている場合は無効にして下さい。
• VS Codeのsettings.jsonで以下設定をfalseに変更して下さい。

"editor.formatOnSave": false  
"javascript.format.enable": false  

プロジェクト導入手順

以下の手順で自動化の設定を行なってください。

1. 本リポジトリでの作業
   1. Lint設定ファイルを生成
   2. ファイル移行
2. 各プロジェクトでの作業
   1. パッケージインストール
   2. package.json修正
   3. Lintエラー修正

本リポジトリでの作業

Lint設定ファイルを生成

ブロジェクトに応じて以下コマンドを実行してください。

JavaScript or jQuery
$ npm run generate

TypeScript
$ npm run generate:ts

React
$ npm run generate:react

React + Typescript
$ npm run generate:react-ts

Vue
$ npm run generate:vue

Vue + TypeScript
$ npm run generate:vue-ts

ファイル移行

.eslintrc.js
.huskyrc

注意事項

• 既に同じファイルがある場合は上書きして下さい
• .prettierrc.jsonがある場合は削除して下さい

各プロジェクトでの作業

パッケージインストール

全プロジェクト共通で入れるパッケージをインストールします。

• eslint
• prettier
• eslint-config-prettier
• eslint-plugin-prettier
• eslint-config-standard
• eslint-plugin-promise
• eslint-plugin-import
• eslint-plugin-node
• husky@3
• lint-staged

下記コマンド実行

$ npm i -D eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-config-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node husky@3 lint-staged

↓プロジェクトに応じて必要なパッケージをインストール

TypeScript
$ npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

React
$ npm i -D eslint-plugin-react eslint-plugin-react-hooks

React + Typescript
$ npm i -D eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser

Vue
$ npm i -D eslint-plugin-vue

Vue + TypeScript
$ npm i -D eslint-plugin-vue

package.json修正

以下追記 ※○○はそれぞれの拡張子に変更してください

TypeSctiptが含まれている場合

"scripts": {
  ...
  "ts-check": "tsc --noEmit",
  // jsファイルのパスを指定して下さい ※拡張子複数指定:'./src/**/*.{○○,○○}'
  "lint": "eslint './src/**/*.○○'",           
  "lint:fix": "eslint --fix './src/**/*.○○'"
}
"husky": {
  "hooks": {
    "pre-commit": "lint-staged  && npm run ts-check"
  }
},
"lint-staged": {
  "*.○○": ["eslint", "git add"] ※拡張子複数指定:"*.{○○,○○}"
},

TypeSctiptが含まれていない場合

"scripts": {
  ...
  // jsファイルのパスを指定して下さい ※拡張子複数指定:'./src/**/*.{○○,○○}'
  "lint": "eslint './src/**/*.○○'",
  "lint:fix": "eslint --fix './src/**/*.○○'"
}
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.○○": ["eslint", "git add"] ※拡張子複数指定:"*.{○○,○○}"
},

Lintエラー修正

以下コマンドを実行し、Lintエラーの自動補完を行って下さい。
自動補完されないLintエラーも検出されますので、手動で修正して下さい。

npm run lint:fix

コミット

ここまで設定を行うと、コミット時に自動的にLintが走ります。
構文エラーがある場合コミットできませんので、SourceTreeに出るエラーメッセージを参考に修正して下さい。

各ESLintルール、よくあるLintエラー詳細

• Standard
• TypeScript
• React
• Vue

補足

Lint管理下から除外したいファイルがある場合は、.eslintrc.jsに以下のように追記して下さい。

{
  ...
  "rules": {
    ...
  }
  // 除外したいフォルダのパスを指定
  ignorePatterns: ['/src/js/libs/']
}