emacsでFirefoxの拡張を開発する環境を構築する

• 概要
• 環境
• eslint のインストール
• js2-mode, company, flycheck のインストール
• emacs の設定
• 課題

概要

emacs で Firefox 拡張を開発する環境を構築してみます

環境

• macOS 11.7.6
• emacs 28.2
• nodejs 19.7.0
  • eslint 8.41.0

eslint のインストール

• npm -g install eslint

firefox 拡張のプロジェクト配下で eslint 用の設定ファイルを記載します

• npm init @eslint/config

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
A config file was generated, but the config file itself may not follow your linting rules.
Successfully created .eslintrc.js file in 

• cat .eslintrc.js

module.exports = {
  "env": {
    "webextensions": true,
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": "eslint:recommended",
  "overrides": [
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
  }
}

js2-mode, company, flycheck のインストール

• M-x package-list-packages

で js2-mode, company, flycheck を選択しインストールします

emacs の設定

(require 'company)
(require 'js2-mode)
(require 'flycheck)

# .js ファイルで js2-mode 起動
(add-to-list 'auto-mode-alist '("\\.js\\'" . js2-mode))
# js2-mode 起動時に company-mode 起動
(add-hook 'js2-mode-hook 'company-mode)
# インデントはスペース2つにする
(add-hook 'js2-mode-hook
  (lambda ()
     (setq my-js-mode-indent-num 2)
     (setq js2-basic-offset my-js-mode-indent-num)
     (setq js-switch-indent-offset my-js-mode-indent-num)
    ))
# js2-mode のデフォルトの linter は無効にする
(setq js2-mode-show-strict-warnings nil)
# js2-mode 起動時に flycheck-mode 起動
(add-hook 'js2-mode-hook #'flycheck-mode)
# flycheck の linter は eslint にする
(setq flycheck-javascript-eslint-executable "eslint")
(with-eval-after-load 'flycheck
  (flycheck-add-mode 'javascript-eslint 'js2-mode))

課題

• 補完をどうするか