プログラミングマガジン

プログラミングを中心にIT技術をできるだけわかりやすくまとめます。

  • ホーム
  • JavaScript
  • 【JavaScript】「TypeScript」でESlintを使うための設定
 
 
     
  • サーバー言語  
    • Python
    • Ruby
    • PHP
    • SQL
  •  
  • インフラ  
       
    • AWS
    •  
    • 基本
    • Git
  • Web
       
    • Web開発
    • JavaScript
    • Vue.js
    • React
  •  
  • 設計  
       
    • 実装設計
    • DB設計
  • 問い合わせ
  

【JavaScript】「TypeScript」でESlintを使うための設定

08.16

  • miyabisan2
  • コメントを書く

この記事は1分で読めます

必要なパッケージのインストール

1
npm install @typescript-eslint/eslint-plugin@latest --save-dev

設定ファイル(.eslintrc.json)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended", // eslint:recommendedに含まれるルールを型チェックでカバーできるものは無効化
    "plugin:@typescript-eslint/recommended", // 型チェックが不要なルールを適用
    "plugin:@typescript-eslint/recommended-requiring-type-checking" // 型チェックが必要なルールを適用
  ],
  "plugins": [
    "@typescript-eslint" // ESLintのTypeScriptプラグインのルールを適用できる様にする(/eslint-pluginは省略可)
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "project": "./tsconfig.json" // tsconfig.jsonの場所を指定
  },
  "parser": "@typescript-eslint/parser", // ESLintにTypeScriptを理解させる
  "env": { "browser": true, "es6": true },
  "globals": {},
  "rules": {}
}

parserOptions

TypeScriptコンパイルの設定ファイルのパスを指定する必要がある。(上の例で言えば、「tsconfig.json」)

注意点

tsconfig.jsonをそのまま指定してしまうとnode_modules内のファイルもパースされてしまいパフォーマンスが低下するらしいので、「tsconfig.eslint.json」みたいなファイルを作って別途指定してあげる方が良いそうです。

実行

1
eslint hello.ts

rules

実際の開発では開発メンバーによって認識の差が生まれることが結構あります。そのような場合に一部のlintをoffにしてしまいます。

1
2
3
rules{
  '@typescript-eslint/explicit-function-return-type': off
}

スポンサーリンク
  • 2021 08.16
  • miyabisan2
  • コメントを書く
  • JavaScript
  • Tweets Twitter
  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. 2021 09.05

    【JavaScript】「シャローコピー」と「ディープコピー」とは

  2. 2018 07.03

    【JavaScript】npmとは?

  3. 2020 04.05

    【JavaScript】「CORS」、「クロスドメイン制約」とは?

  4. 2023 09.28

    StoryBookのインタラクションテスト

  5. 2021 09.17

    【JavaScript】ファイル関連のAPIやオブジェクト(「ArrayBuffer」など)

  6. 2020 10.09

    【Babel】Babelの基本、「presets(プリセット)」、「プラグイン」について

  • コメント ( 0 )
  • トラックバック ( 0 )
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

返信をキャンセルする。

【JavaScript】「import」と「requi…

【オブジェクト指向】ベストプラクティス(デメテルの法則…

RETURN TOP

著者プロフィール

エンジニア歴10年で過去に業務系、Webデザイン、インフラ系なども経験あります。現在はWeb系でフロントエンド開発中心です。

詳細なプロフィールはこちら

スポンサーリンク

カテゴリー

  • Android
  • AngularJS
  • API
  • AWS
  • C++
  • CSS
  • cursor
  • C言語
  • DDD
  • DevOps
  • Django
  • Docker
  • Figma
  • Git
  • GitLab
  • GraphQL
  • gRPC
  • Hasura
  • Java
  • JavaScript
  • Kubernetes
  • Laravel
  • linux
  • MySQL
  • Next.js
  • nginx
  • Node.js
  • NoSQL
  • Nuxt.js
  • Oracle
  • PHP
  • Python
  • React
  • Redux
  • Rspec
  • Ruby
  • Ruby on Rails
  • Sass
  • Spring Framework
  • SQL
  • TypeScript
  • Unity
  • Vue.js
  • Webサービス開発
  • Webデザイン
  • Web技術
  • インフラ
  • オブジェクト指向
  • システム開発
  • セキュリティ
  • その他
  • データベース
  • デザインパターン
  • テスト
  • ネットワーク
  • プログラミング全般
  • マイクロサービス
  • マイクロソフト系技術
  • マルチメディア
  • リファクタリング
  • 副業
  • 未分類
  • 業務知識
  • 生成AI
  • 設計
  • 関数型言語
RETURN TOP

Copyright ©  プログラミングマガジン | プライバシーポリシー