iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 19
0
Software Development

Emacs 來寫程式系列 第 19

[Emacs-19] 用 Emacs 來寫 Javascript 設定篇

Emacs 對於 Javascript 的功能支援

  • js2-mode: 取代原 js-mode
    • 程式高亮
    • 語法檢查 (使用 js-lint)
    • 程式折疊
  • tide-mode: 使用微軟 tsserver 後端,跟 VS Code 相同
    • 自動補全:使用 company-tide
    • 語法檢查: 使用 flycheck + eslint
    • 函式定義文件: 配合 Eldoc
    • 跳到函式定義,搜尋函式使用
    • 函式變數重構
  • Prettier:程式自動排版美化

預先安裝

  • 安裝 eslint
$npm -g install eslint
  • 設定,加入 ~/.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"],
    "no-console": [0]
  }
}

安裝

  • 安裝 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" "setInterval" "console" "__dirname__") )
  )

開啟 .js 檔案時啟動 js2-mode 主模式,設定 indent-offset 為 2,設定一些 javascript 的 global objects 跟 methods

  • 安裝 tide-mode
(defun setup-tide-mode ()
  "Setup tide mode for other mode."
  (interactive)
  (message "setup tide mode")
  (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`
  (company-mode +1))

(add-hook 'js2-mode-hook #'setup-tide-mode)
  • 設定
    • 使用 tide-setup 來啟動 tsserver
    • 設定使用 flycheck
    • 設定使用 eldoc
    • 設定使用 company 來做補全
    • 安裝 prettier
(use-package prettier-js
  :ensure t
  :hook ((js2-mode . prettier-js-mode))
  :config
  (setq prettier-js-args '(
                           "--trailing-comma" "all"
                           "--bracket-spacing" "false"
                           ))
  )

當使用 js2-mode 時啟動 prettier-js-mode

我們下一篇再來看如何使用這些安裝完的功能

相關影片

相關簡報: 簡報
相關程式: Github
相關資訊:請參考 我的部落格


上一篇
[Emacs-18] 用 Emacs 寫一個 Landing Page
下一篇
[Emacs-20] 用 Emacs 來寫 javascript 的小範例
系列文
Emacs 來寫程式30

尚未有邦友留言

立即登入留言