• 作成:
  • 更新:

Emacsでtslintが使われているプロジェクトではtslint, eslintに移行したらしきプロジェクトではeslintが使われるようにする

TypeScriptでは今後ESLintが使われるようになりました.

TypeScript on ESLint の未来 - Qiita

それ自体の設定は以下です.

@typescript-eslint ことはじめ - teppeis blog

ちなみに私は

"extends": ["plugin:@typescript-eslint/recommended"]

を有効にしています.

また fathyb/parcel-plugin-typescript: 🚨 Enhanced TypeScript support for Parcel を導入してparcelがビルド時に型エラーを報告するように… 出来れば良かったんですがどうもこれうまく動かないようですね.

tslintとeslintの共存

しかし既存のプロジェクトではまだまだtslintを使っているものが多いです. いずれ移行していくとして, ひとまずはtslintが使われているプロジェクトではtslintを使って, 移行したプロジェクトではeslintを使うようになって欲しいですね.

というわけで私のEmacs向けにちょっとした設定を書きました.

(with-eval-after-load 'web-mode
  (with-eval-after-load 'eglot
    (add-to-list 'eglot-server-programs (cons 'web-mode (cdr (assoc '(js-mode typescript-mode) eglot-server-programs))))))

(defun prettier-js-mode-enable ()
  (interactive)
  (prettier-js-mode t))

(flycheck-add-mode 'html-tidy 'web-mode)
(flycheck-add-mode 'javascript-eslint 'web-mode)
(flycheck-add-mode 'typescript-tslint 'web-mode)

(flycheck-add-mode 'javascript-eslint 'typescript-mode)

(defun flycheck-select-tslint-or-eslint ()
  "tslintが使えるプロジェクトだとtslintを有効化して, それ以外ではeslintを有効化する"
  (if (and
       ;; 大前提としてtslint.jsonがないとだめ
       (locate-dominating-file default-directory "tslint.json")
       (or
        ;; メジャーモードがTypeScriptなら良い
        (equal major-mode 'typescript-mode)
        ;; それ以外のメジャーモード(web-modeとか)でも拡張子がts, tsxなら良い
        (member (file-name-extension (buffer-file-name)) '("ts" "tsx"))))
      (flycheck-select-checker 'typescript-tslint)
    (when (executable-find "eslint")
      (progn
        (flycheck-select-checker 'javascript-eslint)
        (add-hook 'after-save-hook 'eslint-fix nil t)))))

(defun web-mode-setting ()
  (cond
   ((string= web-mode-content-type "html")
    (progn
      (prettier-js-mode-enable)
      (when (executable-find "tidy") (flycheck-select-checker 'html-tidy))))
   ((member web-mode-content-type '("javascript" "jsx"))
    (progn
      (eglot-ensure)
      (flycheck-select-tslint-or-eslint))))
  (when (member web-mode-content-type '("css" "javascript" "json" "jsx"))
    (prettier-js-mode-enable)))

(add-hook 'web-mode-hook 'web-mode-setting)

(add-hook 'typescript-mode-hook 'eglot-ensure)
(add-hook 'typescript-mode-hook 'flycheck-select-tslint-or-eslint)

私はtsxにはJSX記法の見易さのためにweb-modeを使っているので少し複雑になりました.

ついでにeglotで sourcegraph/javascript-typescript-langserver: JavaScript and TypeScript code intelligence through the Language Server Protocol を使うように有効にしておきます.

Tide の役目は終了で良いでしょう. これまでお世話になりました.