【初心者】vscode-eslintでTypeScriptを自動整形

**TypeScriptをESLint/prettierで自動整形したいと思ったので、ちょっとググってやってみたので自分の備忘録で投稿させていただきました:confounded:、あてにしないでください。**

参考にしたサイトは以下です。ちゃんとした情報がほしい方は以下のリンクを見てください。
https://ics.media/entry/16329
https://github.com/Microsoft/vscode-eslint/issues/284

## フォルダ構成

```
./
├ dist
├ node_modules
├ src
│  └ main.ts
├ .eslintrc.json
├ index.html
├ package-lock.json
├ package.json
├ tsconfig.json
└ webpack.config.js
```

## 準備

```json:package.json
{
  "name": "hogehoge",
  "version": "1.0.0",
  "description": "",
  "main": "./src/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^5.4.0",
    "eslint-config-prettier": "^3.0.1",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-typescript": "^0.12.0",
    "prettier": "^1.14.2",
    "ts-loader": "^4.5.0",
    "typescript": "^3.0.3",
    "typescript-eslint-parser": "^18.0.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  }
}
```

`$ npm i`を実行

---

```json:.eslintrc.json
{
    "env":{
        "browser": true,
        "node":true,
        "es6": true
    },
    "globals": {},
    "parser": "typescript-eslint-parser",
    "plugins": ["typescript"],
    "extends": [
        "eslint:recommended",
        "plugin:prettier/recommended"
    ],
    "rules": {
        "no-undef": "off",
        "no-unused-vars":"off",
        "no-console":"off",
        "prettier/prettier": [
            "error",
            {
              "trailingComma": "es5"
            }
        ]
    },
    "parserOptions": {
        "sourceType": "module"
    }
}
```

```json:tsconfig.json
{
    "compilerOptions": {
        "sourceMap": true,
        "target": "es5",
        "module": "es2015"
    }
}
```

```js:webpack.config.js
module.exports = {
  mode: "development",
  entry: "./src/main.ts",
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
      },
    ],
  },
  resolve: {
    extensions: [".ts"],
  },
};
```

```html:index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./dist/main.js"></script>
</body>
</html>
```

## VSCodeの設定

ESLintの拡張機能をインストール
https://github.com/Microsoft/vscode-eslint

![スクリーンショット 2018-09-01 2.43.26.png](https://qiita-image-store.s3.amazonaws.com/0/142910/56989369-3deb-3475-4f58-b5b481c2df9f.png)

macだと`⌘ + ,`を押して設定ファイルを開いて、以下を追加する

```json
{
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {"language": "typescript", "autoFix": true },
    {"language": "typescriptreact", "autoFix": true }
  ]
}
```

---

./src/main.tsにtypescriptを記述し、`⌘ + s`で保存するときに自動で整形してくれました。

※www.typescriptlang.orgからサンプルになりそうなコードをコピー
http://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

```typescript:./src/main.ts
class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);
```

---

![mHXYibhhn0.gif](https://qiita-image-store.s3.amazonaws.com/0/142910/679fce1f-3b26-8f6b-b3ff-4b7231de6754.gif)

---

ブラウザでも動作確認しておく`npx webpack && open index.html`を実行

![スクリーンショット 2018-09-01 3.01.35.png](https://qiita-image-store.s3.amazonaws.com/0/142910/9f360e13-751e-c77e-74e4-800a75ef98ac.png)

---

最後まで読んでくださり、ありがとうございましたm(_ _)m