Svelte#1 - Svelte scss/eslint 관련 vscode 설정

svelte관련 vscode scss 세팅 및 eslint 세팅

이 포스트에서 Svelte / roullup의 기본세팅 및 기본문법 이런 종류의 글은 없다. Svelete라는 Framework를 직접 써보고 이거저거 세팅해보다가 막혔던 부분들에 대해 기록해보고자 한다.

Svelte를 처음 접한 소감

내가 처음 Svelte를 접했을때 느꼈던 부분은 Vue와 Web Component, handlebars 3가지를 섞어놓은 느낌이였다. 이벤트 바인딩은 Vue쪽을, 템플릿안에 script / html / css 3가지가 같이 들어가는 부분과 css의 scope가 그 템플릿에 한정되어지는 shadow root의 기능을 가진 web component방식을 섞어놓은 FrameWork구나 싶었다. 물론 scope를 갖히게 하는 근본적인 로직은 서로 다르지만 개인적으로 Web component에 관심이 많았던 나는 괜히 반가웠다.

Slot 이라는 기능도 Web component에서 먼저 나왔었고, 이후 Vue에서 따라했으니 어찌됬든 두가지를 잘 섞어놓고 Runtime에 실행이 필요없는 자칭 compiler라고 얘기하는 이 Framework를 사용해보자.

본격적인 Svelete + GraphQL 포스팅 전에 svelte관련해서 scss와eslint를 설정 하다가 좀 애먹은 부분이 있어서 공유 및 기록한다.

rollup scss setting

svelte 파일안에는 css도 같이 들어가기 때문에 scss를 세팅해보자. Svelte-Preprocess를 사용하여 세팅해보았다. PostCss등은 여기에서는 굳이 사용하진않았다. 이것도 심플하다. 먼저 npm module을 설치하자.

// Svelte는 Runtime에 실행할일이 없는 Compiler이기때문에 devDependencies에 설치해도 상관없다.
npm i -D svelte-preprocess
yarn add svelte-preprocess --dev

rollup.config.js

import autoPreprocess from 'svelte-preprocess';

plugins:[
  ...
  svelte({
    preprocess: autoPreprocess()
  }),
]

sample.svelte

<style lang="scss">
  @import './scss/variables.scss';
</style>
// Or
<style src="./scss/variables.scss"></style>

여기서 중요한 포인트는 lang="scss"이부분만 기억하면 될거같다.

scss 파일도 alias등록을 하거나 path.resolve를 해서 변수로 관리하고싶은데 이부분은 시도하다가 계속 실패했다. 혹시 아시는분 계시면 정보 공유좀 부탁드립니다.

scss setting 후 vscode 설정하기

svelte안에서 scss 세팅을 한후에 vscode에서 .svelte파일을 열고 scss를 실제로 사용해보면 css syntax error 를 뱉는다. 이부분은 아래와 같은 방법으로 해결 가능하다.

• svelte.config.js파일을 프로젝트 root에 생성하고, 다음과 같은 소스를 추가해준다.

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess(),
};

eslint 관련 vscode 설정

Svelte는 eslint만 설치해서 바로 되지는 않는다. svelte template안에 3가지의 언어(js/html/css)가 들어가기 때문에 설정이 항상 쉽지는 않은가보다. 일단 eslint 설치 및 eslint-plugin-svelte3 이 2가지를 설치해보자.

npm i -D eslint eslint-plugin-svelte3
yarn add eslint eslint-plugin-svelte3 --dev

• 이 또한 vscode에서 eslint가 정상동작 하기 위해서는 추가 설치 파일이 필요하다. 기존에 .eslintrc파일을 js로 변환을 해줘야 된다.
  이 파일도 마찬가지로 프로젝트 root에다가 파일을 하나 생성하자.
  

.eslintrc.js

module.export = {
  ...eslintrc config option
}

그리고 vscode 설정파일인 settings.json 파일에도 추가 설정이 필요하다.

settings.json

"eslint.validate": ["svelte"]

이제서야 vscode안에서 eslint도 정상동작한다. 이렇게 수정하고 나서 보면 별거 아니지만, 은근히 해결방법을 찾는데 시간이 좀 걸린듯 하여 이렇게 남겨봤다.

마치며

GraphQL과 Svelte를 이용한 후기를 포스팅 하려다 설정에 애먹은 추억때문에 vscode 설정에 관한 글로 대체헸다. 다음 포스팅에서는 지난 포스트에서 설정해놓은 GraphQL Apollo Mockup Data를 이용해서 본격적으로 Svelte + GraphQL 후기 및 Slot에 대해 기록하고자 한다.