moraTorIamプログラマ

プログラミングに関する知見を書きます。

VSCodeでJavascriptを書く際にESLintで自動修正する方法

JavaScript

はじめに

Reactを勉強するにあたりtutorialのプログラムを書き始めようと思ったのですが、eslintを導入することでJavaScript(今回の場合はReact)が書きやすくなったので紹介します。

f:id:shanshan_san:20190125055444g:plain

環境

手順

VSCodeの拡張機能ESLintの設定

 まず始めにVSCodeの拡張機能から「ESLint」を検索してインストールします。

インストールしたら、「設定」から「ESLint」の項目へいき、Auto Fix on SaveとEnableにチェックを入れてください。

これで保存時にESLintが適用されるようになりました。

その後、setting.jsonに以下を追記してください。

  "eslint.options": {
    "configFile": ".eslintrc.js"
  }

これでプロジェクトフォルダに.eslint.jsを置くことでeslintのルールを定めることができるようになりました。

Reactアプリケーションの作成

今回はcreate-react-appを使用してアプリケーションを作成します。

既に適用したいアプリケーションがある人は飛ばしてください。

$ create-react-app react-tutorial

必要なnode moduleのインストールと設定

$ npm install eslint eslint-plugin-react --save-dev
$ node node_modules/eslint/bin/eslint --init

初めの質問に「Answer questions about your style」と答えると質問を次々とされるので答えていきます。

? Which version of ECMAScript do you use? ES2015
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? No
? Do you use JSX? Yes
? Do you use React? Yes
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? No
? What format do you want your config file to be in? JavaScript
The config that you've selected requires the following dependencies:

僕はこんな風に答えました。 最後の回答はJavaScriptにしてください。 JSONなど他の形式がいい場合はVSCodeの設定部分も変更してください。 回答が終わると、Successfully created .eslintrc.js fileと最後に表示されて.eslintrc.jsが作られたはずです。

今回はReactで推奨される設定を手軽にするためにeslint-plugin-reactを入れているので、設定でeslintに読み込ませます。 こちらのConfigurationを参考にextendsとsettingsの項目を.eslintrc.jsに追記してください。 参考までに、僕の設定ファイルを載せておきます。

module.exports = {
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ]
  },
  "settings": {
    "react": {
      "createClass": "createReactClass",
      "pragma": "React",
      "version": "15.0",
      "flowVersion": "0.53"
    },
    "propWrapperFunctions": ["forbidExtraProps"]
  }
};

以上で導入は完了です。

VSCodeを再起動し、インデントを崩した.jsファイルを保存すると自動で修正されるかと思います。

VueでのESLinterの導入について

t-kojima.github.io

こちらを参考にすると大方うまくいきますが、気が向いたら記事にしようかと思います。

VueでのリESlintとフォーマッタの導入について書きました。

shanshan.hatenadiary.jp

以上、お疲れ様でした。