LoginSignup
3

More than 5 years have passed since last update.

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

Posted at

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

準備

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を実行


.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"
    }
}
tsconfig.json
{
    "compilerOptions": {
        "sourceMap": true,
        "target": "es5",
        "module": "es2015"
    }
}
webpack.config.js
module.exports = {
  mode: "development",
  entry: "./src/main.ts",
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
      },
    ],
  },
  resolve: {
    extensions: [".ts"],
  },
};
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

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

{
  "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

./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


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

スクリーンショット 2018-09-01 3.01.35.png


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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3