Emacs for Javascript

• 介紹 Emacs 作為 Javascript 編輯器的套件支援

• js2-mode
  • syntax highlight and checking
  • can add js2-refactor
• tide mode
  • 支援 flycheck (例如 eslint)
  • 支援 eldoc
  • 支援 company
  • Jump to definition
  • refactor
• prettier-js
• eslint 安裝

(use-package js2-mode
  :ensure t
  :mode (("\\.js\\'" . js2-mode)
         ("\\.json\\'" . javascript-mode))
  :init
  (setq-default js2-basic-offset 2)
  (setq-default js2-global-externs '("module" "require" "assert" "setTimeout" "clearTimeout" "setInterval" "clearInterval" "location" "__d\
irname" "console" "JSON")))

(defun setup-tide-mode ()
  (interactive)
  (tide-setup)
  (flycheck-mode +1)
  (setq flycheck-check-syntax-automatically '(save mode-enabled))
  (eldoc-mode +1)
  (tide-hl-identifier-mode +1)
  ;; company is an optional dependency. You have to
  ;; install it separately via package-install
  ;; `M-x package-install [ret] company`
  (add-to-list (make-local-variable 'company-backends)
               'company-files)
  (company-mode +1))

(add-hook 'js2-mode-hook #'setup-tide-mode)

(use-package tide
  :ensure t
  :after (typescript-mode company flycheck)
  :hook ((typescript-mode . tide-setup)
         (typescript-mode . tide-hl-identifier-mode)
         (before-save . tide-format-before-save)))

• 先安裝 prettier

$sudo npm install -g prettier

• 安裝 emacs 套件

(use-package prettier-js
  :ensure t
  :hook ((js2-mode . prettier-js-mode))
  :config
  (setq prettier-js-args '("--trailing-comma" "all"
                           "--bracket-spacing" "false")))

• 安裝 eslint

$sudo npm install -g eslint

• .eslintrc

# ~/.eslintrc
{
  "extends": "eslint:recommended",        
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "ecmaFeatures": {
    "arrowFunctions": true,
    "blockBindings": true,
    "classes": true,
    "defaultParams": true,
    "destructuring": true,
    "forOf": true,
    "generators": true,
    "modules": true,
    "spread": true,
    "templateStrings": true,
    "jsx": true
  },
  "rules": {
    "semi": ["warn", "always"], 
    "quotes": ["warn", "double"],
    "consistent-return": [0],
    "key-spacing": [0],
    "new-cap": [0],
    "no-multi-spaces": [0],
    "no-shadow": [0],
    "no-unused-vars": [1],
    "no-use-before-define": [2, "nofunc"]
  }
}