I've been figuring out a while how to make quick and simple config for spacemacs for web dev. There is lots of approaches in the internet, however, cherry-picking from those usually results in some problems as I didn't find any up-to-date one.
So I decided to share how to prepare simple and efficent spacemacs environment for web dev. Should work also for Angular, Vue etc but I didn't test it. Tested with NestJS, works like a charm.
M1 CPUs needs node 15+ but recommended is 16 (as it is LTS and the one I tested this conf with).
In order to make spacemacs work with React, Typescript, TSX files and work FAST I decided to use LSP server and make well configurated layers in spacemacs.
First you need to have installed:
npm install -g typescript
npm install -g typescript-language-server
npm install -g prettier
Additionally be sure your system has unzip binary available. This will be needed to install lsp-eslint package.
.spacemacs file
below you can find 2 sections:
- dotspacemacs-configuration-layers
- dotspacemacs/user-config
dotspacemacs-configuration-layers
dotspacemacs-configuration-layers
'(yaml
auto-completion
better-defaults
emacs-lisp
git
graphql
helm
html
lsp
json
multiple-cursors
org
prettier
(shell :variables
shell-default-height 30
shell-default-position 'bottom)
spell-checking
syntax-checking
version-control
themes-megapack
(typescript :variables
typescript-linter 'eslint
typescript-fmt-tool 'prettier
typescript-backend 'lsp)
treemacs)
dotspacemacs/user-config
(defun dotspacemacs/user-config ()
(setq create-lockfiles nil)
)
Finally, use SPC-SPC, find lsp-install-server, select eslint (this uses unzip in your OS so as mentioned earlier be sure you have it available).
As a result it let you have all features like auto-completion, finding definitions, checking for type errors, linting, code lens, links to docs, code formatting (with .prettierrc file) and much more.
BTW: Be sure your Spacemacs can access node binary. It may turn out your Spacemacs ENV variables aren't same as in shell you use. I had situation that shell in Spacemacs shown my normal shell variables but was running node with some internal ones. Solved by adding node path to .profile but way you got installed Emacs may require other approach.
Top comments (2)
Hi! Have you been able to integrate any kind of REPL to the setup?
Sorry for late answer - no, I just use shell inside emacs or in separate window.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.