.prettierrc
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
"svelteSortOrder" : "options-scripts-markup-styles",
"svelteStrictMode": true,
"svelteBracketNewLine": true ,
"svelteAllowShorthand": false,
"svelteIndentScriptAndStyle": false
}
추가 필요 한 사항
scss, postcss, alias 기본 설정
tailwindcss 선택 사항
기타 라이브러리 적용여부
페이지 폴더 아래 +page.svelte 가 해당 페이지 파일
router 부분은 /page 링크 연결 필요
lyaout은 src 최상단 부분 +layout.svelte 에서 으로 연결
components는 다른 페이지 영역에서 공통 제어
assets은 scss,css,images 등 추가 파일 연결
문법 요소
import {
onMount,
onDestroy,
beforeUpdate,
afterUpdate,
tick,
setContext,
getContext,
hasContext,
getAllContexts,
createEventDispatcher
} from 'svelte';
import { writable, readable, derived, get, set, readonly } from 'svelte/store';
import { tweened, spring } from 'svelte/motion';
import {
fade,
blur,
fadeIn,
fadeOut,
fadeInOut,
fly,
slide,
scale,
draw,
crossfade,
flip
} from 'svelte/animate';
import {
ease,
back,
bounce,
circ,
cubic,
elastic,
expo,
quad,
quart,
quint,
sine
} from 'svelte/easing';
require('svelte/register');