Emacs for Javascript

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

Youtube 影片

Emacs for Javascript

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

js2-mode 安裝

(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")))

tide-mode 安裝

(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 安裝

  • 先安裝 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 安裝

  • 安裝 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"]
  }
}
Notice: compact(): Undefined variable: limits in /var/www/html/wp-includes/class-wp-comment-query.php on line 853 Notice: compact(): Undefined variable: groupby in /var/www/html/wp-includes/class-wp-comment-query.php on line 853

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *