LunarVim에서 에슬린트를 구성하고 더 예쁘게 만들기🌙. 보너스: Tailwindcss 🌊

축하합니다. 웹 개발 활동을 neovim으로 옮기기로 결정하셨습니다. 특히 LunarVim . 좋은 선택!

LunarVim은 여러분이 기대하는 대부분의 작업을 자동으로 수행하지만 🤖 포맷터나 린터를 결정하지는 않습니다.

짧고 간단하게 유지하십시오.

에스린트

eslint를 프로젝트의 linter로 추가합니다. 그것이 devDependency로 설치되어 있는지 또는 그 삶에 관한 것이라면 전역적으로 설치되어 있는지 확인하십시오.

다음으로 LunarVim 안에 있는 동안 <leader> L c ( <leader>는 변경하지 않는 한 일반적으로 스페이스바임)을 입력하여 편집기인 lua를 사용하여 구성하는 config.lua에 도달합니다 😃

이제 맨 아래에 다음 줄을 추가하십시오.

local linters = require "lvim.lsp.null-ls.linters"
linters.setup {
  { command = "eslint", filetypes = { "typescript", "typescriptreact" } }
}

이전에 지역 변수linters를 선언하지 않았는지 확인하고 저장하면 짜잔! 당신은 eslint와 협력하는 학대 관계로 돌아왔습니다!

더 예쁘다

프로젝트의 포맷터로 prettier를 추가하려면 eslint와 유사하게 연결할 수 있는 위치에 설치해야 하며 린터와 마찬가지로 config.lua ( <leader> L c )에 포맷터를 다음과 같이 추가합니다.

local formatters = require "lvim.lsp.null-ls.formatters"
formatters.setup {
  {
    command = "prettier",
    filetypes = { "typescript", "typescriptreact" },
  },
}

예리한 눈을 가진 사람들을 위해 구성에 prettier 를 사용하는 예제가 포함되어 있다는 것을 알 수 있습니다.

보너스: TailwindCSS 🌊

남자 나는 순풍을 사랑합니다. 나는 그것의 지능을 좋아하고 타협하는 것을 좋아하지 않습니다. 그래서 당신이 나와 같고 당신의 프로젝트에서 순풍을 사용했다면. 문서화되지 않은 경우 설정은 다소 간단합니다.

먼저 :LspInstall tailwindcss를 사용하여 tailwind lsp를 설치합니다. 일반적으로 이 정도면 충분하지만 이 경우에는 그렇지 않습니다. lvim은 순풍에 대한 구성과 함께 제공되지만 실제로 순풍을 설정하도록 그에게 알려야 합니다!

가장 쉬운 방법은 yarn global add @tailwindcss/language-server와 같이 tailwind 언어 서버를 전역적으로 먼저 설치하는 것입니다.

그런 다음 config.lua (<leader> L c 사용)로 돌아가서 줄을 추가하십시오.

require("lvim.lsp.manager").setup "tailwindcss"

참고: 언어 서버의 로컬(읽기: devDeps) 버전을 사용하는 방법이 있지만 약간 복잡하고 프로젝트별로 설정해야 합니다. 그래서 예 🤠

누구에게나 도움이 되는 희망

P.S 이 중 하나가 즉시 시작되지 않으면 LunaVim을 닫고 열어보십시오.