🧠Junghanacs

Recent Notes

#이맥스통합개발환경: #웹

Jul 05, 20236 min read

관련 노트

History

  • [2024-09-07] doom doctor 처리 문득
  • 2023-11-26 웹개발 전반 정리
  • 2023-11-16 라이팅허브에 본격 사용 - 기본 구성 활용 - 인덴테이션 2
  • 2023-10-13 기본 구성 사용.
    • : npm i -g typescript typescript-language-server
  • 2023-07-05 JavaScript lsp-mode 동작.

#둠이맥스 관련 패키지 설치

[2024-09-07 Sat 07:09]

모듈 사용 할 때 관련 툴 설치.

udo apt-get install node-js-beautify tidy
npm install -g stylelint

#참고 #미니멀 #환경설정 (Systematician 2024)

[2024-09-07 Sat 07:09]

  • "How to Setup Emacs for Web Development" 2024 Systematician
    • In this video, I’ll walk you through setting up Emacs for modern web development. If you’re looking to make Emacs more IDE-like with features like LSP, auto-completion, and Tree-sitter, this guide will help you get there! Code from the video: https://github.com/systematician/emac... ⏱️ Timestamps: 00:00 - Intro 00:45 - Prerequisites 1:33 - Treesitter 5:28 - LSP 10:15 - Linting 12:56 - Autocompletion 15:48 - Formatting 17:20 - Outro
;; Some general tweaks, you can skip these
;; Initialize package sources
(require 'package)
 
(setq package-archives '(("melpa" . "https://melpa.org/packages/")
                         ("org" . "https://orgmode.org/elpa/")
                         ("elpa" . "https://elpa.gnu.org/packages/")))
 
(package-initialize)
(unless package-archive-contents
  (package-refresh-contents))
 
(require 'use-package)
(setq use-package-always-ensure t)
 
(load-theme 'tango-dark)
(menu-bar-mode -1)
(setq ring-bell-function 'ignore)
(global-hl-line-mode t)
 
(setq custom-file (expand-file-name "custom.el" user-emacs-directory))
(load custom-file 'noerror 'nomessage)
 
(use-package which-key
  :demand t
  :after evil
  :custom
  (which-key-allow-evil-operators t)
  (which-key-show-remaining-keys t)
  (which-key-sort-order 'which-key-prefix-then-key-order)
  :config
  (which-key-mode 1)
  (which-key-setup-minibuffer)
  (set-face-attribute
   'which-key-local-map-description-face nil :weight 'bold))
 
(use-package envrc
  :hook (after-init . envrc-global-mode))
 
(use-package evil
  :demand t
  :init
  (setq evil-want-integration t
        evil-want-keybinding nil
        evil-want-C-u-scroll t
        evil-want-Y-yank-to-eol t
        evil-split-window-below t
        evil-vsplit-window-right t
        evil-respect-visual-line-mode t
        evil-undo-system 'undo-tree)
  :config
  (evil-mode 1))
 
;; Main configuration starts here
 
(use-package treesit-auto
  :custom
  (treesit-auto-install 'prompt)
  :config
  (setq treesit-auto-langs '(javascript typescript tsx css html))
  (treesit-auto-add-to-auto-mode-alist '(javascript typescript tsx css html))
  (global-treesit-auto-mode))
 
(use-package lsp-mode
  :commands (lsp lsp-deferred)
  :hook ((prog-mode . lsp-deferred)
         (lsp-mode . lsp-enable-which-key-integration))
  :custom
  (read-process-output-max (* 1024 1024))
  :init
  (setq lsp-completion-provider :none)
  (setq lsp-keymap-prefix "C-c")
  (setq lsp-diagnostics-provider :flycheck))
 
(use-package lsp-ui
  :hook (lsp-mode . lsp-ui-mode))
 
(use-package flycheck
  :hook (lsp-mode . flycheck-mode)
  :bind (:map flycheck-mode-map
              ("M-n" . flycheck-previous-error)
              ("M-p" . flycheck-next-error))
  :custom (flycheck-display-errors-delay .3))
 
(use-package corfu
  :custom
  (corfu-cycle t)
  (corfu-auto t)
  (corfu-auto-prefix 2)
  (corfu-auto-delay 0)
  (corfu-popupinfo-delay '(0.5 . 0.2))
  (corfu-preview-current 'insert)
  (corfu-preselect 'prompt)
  (corfu-on-exact-match nil)
  :bind (:map corfu-map
              ("TAB"        . corfu-next)
              ([tab]        . corfu-next)
              ("S-TAB"      . corfu-previous)
              ([backtab]    . corfu-previous)
              ("S-<return>" . corfu-insert)
              ("RET"        . corfu-insert))
  :init
  (global-corfu-mode)
  (corfu-history-mode))
 
;; Adds icons to the pop-up window
(use-package nerd-icons-corfu
  :after corfu
  :init (add-to-list 'corfu-margin-formatters #'nerd-icons-corfu-formatter))
 
(use-package apheleia
  :hook (prog-mode . apheleia-mode)
  :config
  (setf (alist-get 'prettier apheleia-formatters)
        '("prettier" "--stdin-filepath" filepath)))

yarn install

[2023-12-26 Tue 18:01]

from ubuntu pkgs yarnpkg 가 있다. 단 이름을 심볼링 링크로 변경해주면 된다.

 
jhnuc :: ~ » sudo apt-get install yarnpkg                                                          130 ↵
jhnuc :: ~ » ln -s /usr/bin/yarnpkg ~/.local/bin/yarn                                                          130 ↵
jhnuc :: ~ » whereis yarn
yarn: /home/junghan/.local/bin/yarn
jhnuc :: ~ » yarn --version
1.22.19
jhnuc :: ~ »
 
굳이 이렇게 할 필요가 없다.
# curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
# echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
# sudo apt-get instlal yarn
 
이것도 마찬가지다.
 
# from npm
# sudo npm install -g yarn

jest install for exercism test

[2023-11-25 Sat 14:33]

sudo apt-get install jest

Major mode key bindings

[2023-11-16 Thu 07:04]

  • [2023-11-16 Thu 07:05] Major-mode 키를 활용한다. npm run 에 보면 npm test 도 있다. 즉, 커맨드에 나갈 필요가 없다.

JavaScript with LSP-MODE

/home/junghan/sync/code/ide/emacs-js-setup/foo.js 여기에서 테스트 해보면 된다.

2023-11-26 : 아래를 보면서 새삼 느끼게 된다. 다시 보자. 아래를 만드는 시점에는 부족하여 아이비 버전으로 포크를 했었다.

[2023-07-05 Wed] 뭐가 뭔지 모를 때는 되는 것부터 확인하는게 맞다. LSP 를 사용할

것이다.

어젠다로

  • auto completion

  • code navigation

  • debug js running in firefox

  • (setq js-indent-level 2)

  • install nodejs

  • lsp-mode and prog-mode-hook

    댑 디버거 키 바인딩을 789 펑션 키로 잡아놨네. (require 'dap-firefox) 이걸 어디에? 이걸 해야 dap-firfox-setup 이 보인다. ㅈ

https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug 다운 받으라. 히스토리가서. 다운 받으면 아래와 같이 압축 풀면 된다.

  • dap-firefox 
     $ mkdir ~/.spacemacs.d/.extension/vscode/firefox-devtools.vscode-firefox-debug/ -p
 $ unzip ~/Downloads/firefox-devtools.vscode-firefox-debug-2.9.8.vsix -d ~/.spacemacs.d/.extension/vscode/firefox-devtools.vscode-firefox-debug
    update the debugger reference 
      (with-eval-after-load 'dap-mode
    (require 'dap-chrome)
    ;; (add-hook 'lsp-mode-hook #'lsp-enable-which-key-integration)
    (require 'dap-firefox)
    (setq dap-firefox-debug-program
      '("node"
         "~/.spacemacs.d/.extension/vscode/firefox-devtools.vscode-firefox-debug/extension/dist/adapter.bundle.js"))
    )

Javascript Layer for Coding

From vanilla Emacs to JavaScript IDE - YouTube

lsp-mode dap-mode vscode-firefox-debug

별로 어려울게 없다. 그냥 lsp 커맨드에서 다 된다.

react 전자정부 템플릿 [2023-03-24 Fri 06:37] <~/spacemacs-default/layers/+frameworks/react/packages.el> https://github.com/eGovFramework/egovframe-template-simple-react

dap mode 넣으면 react native 까지 된다.

NEW Emacs Typescript React DEMO

[2023-07-09 Sun 12:50]

이 영상을 기준으로 조금 더 파헤쳐 보려고 한다. 설정 파일을 보면 별거 없다. 뭐가 중요한가?!

실제 데모이다. 샘플 앱을 생성하고 편집기의 기능이 동작 여부를 확인하는 것이다. 기능 검증이라고 볼 수 있겠다.

References

Related-Notes

References

Systematician, ed. 2024. How to Setup Emacs for Web Development. Directed by Systematician. https://www.youtube.com/watch?v=FukoOretjg8.

Backlinks