VSCodeでReactのプロジェクトを新規作成して、linterの設定を行う

React vscode ESlint stylelint Prettier

やりたいこと

  • vscode上でReactのプロジェクトを新規作成
  • linterの設定とコード補完の設定を行う
  • ESlintの設定にはairbnbを使用
  • stylelintの設定はstylelint-config-standardを使用

実行環境

OSはwin10

node -v
v10.13.0

npm -v
6.9.0

create-react-app -V
3.3.0

React プロジェクト作成

create-react-app project-name
cd project-name

# create-react-appをインストールしてない場合には下記を実行
npm install -g create-react-app

React開発環境構築(vscode)

1. vscode Extensionsの追加

  • ESlint
  • Prettier
  • stylelint

2. linterの設定ファイルを追加

npm install --save prop-types
npm install --save-dev eslint-config-airbnb

eslint-config-airbnbはESLintの規約の一つ。
結構厳しめの規約なので、場合によっては不要。

npm install --save-dev stylelint-config-standard

stylelint-config-standardは最も一般的なCSSのコーディング規約集。
ほとんどの場合において、入れておいたほうがいいと思います。

3. 設定ファイルを追加

プロジェクト直下に設定ファイルを追加

  • /project-name/.vscode/settings.json
  • /project-name/.eslintrc
  • /project-name/.stylelintrc
// /project-name/.vscode/settings.json
{
  "editor.formatOnSave": false,
  "eslint.autoFixOnSave": true,
  "editor.tabSize": 2,
  "eslint.run": "onSave",
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "eslint.validate": ["javascript", "javascriptreact"]
}

// /project-name/.eslintrc
{
  "extends": ["airbnb"],
  "parser": "babel-eslint",
  "plugins": ["react"],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
  },
  "env": {
    "browser": true,
    "es6": true
  }
}

// /project-name/.stylelintrc
{
    "extends":["stylelint-config-standard"]
}