[Svelte] Getting Started with VSCode

Svelte is a framework that aims to "write less code", "no virtual dom", and "truly reactive".

Therefore, the application code and result of svelte are simple and tiny.

Create an Application

Let's create a svelte application using the template.

$ npx degit sveltejs/template getting-started

Move to the application folder.

$ cd getting-started

Enable TypeScript.

$ node scripts/setupTypeScript.js

Install dependencies.

$ yarn
or
$ npm install

Now, run the application.

$ yarn dev
or
$ npm run dev

You can access your application via a web browser.

http://localhost:5000/

ESLint Setting for Svelte

We will add a linter for our application.

Install dependencies.

$ yarn add -D eslint eslint-plugin-import eslint-plugin-svelte3
or
$ npm install -D eslint eslint-plugin-import eslint-plugin-svelte3

Add the ESLint setting file to the project.

 

.eslintrc.json

{
  "env": { "browser": true, "es6": true, "jest": true, "node": true },
  "extends": ["eslint:recommended", "plugin:import/recommended"],
  "overrides": [{ "files": ["**/*.svelte"], "processor": "svelte3/svelte3" }],
  "parserOptions": { "ecmaVersion": 2019, "sourceType": "module" },
  "plugins": ["import", "svelte3"]
}

 

And, add the below script into the package.json.

"scripts": {
    ...
    "lint": "eslint --fix --quiet src --ext .js,.svelte"
},

 

Test the linter through the terminal.

$ yarn lint
or
$ npm run lint

Prettier Setting for Svelte

We will add a formatter for our application.

Install dependencies.

$ yarn add -D prettier prettier-plugin-svelte
or
$ npm install -D prettier prettier-plugin-svelte

Add the Prettier setting file to the project.

 

.prettierrc

{
  "arrowParens": "avoid",
  "bracketSpacing": false,
  "singleQuote": true,
  "svelteSortOrder": "scripts-markup-styles",
  "trailingComma": "none"
}

 

And, add the below script into the package.json.

"scripts": {
    ...
    "format": "prettier --write '{public,src}/**/*.{css,html,js,svelte}'"
},

 

Test the formatter through the terminal.

$ yarn format
or
$ npm run format

VSCode Setting for Svelte

VSCode is my favorite editor for several years.

I used it since it was released beta, and now I've been using it for most of the editing.

So I wanted to introduce it as an editor for svelte.

 

Install the below extensions.

• dbaeumer.vscode-eslint
• esbenp.prettier-vscode
• svelte.svelte-vscode
• fivethree.vscode-svelte-snippets
• ardenivanov.svelte-intellisense

Add this setting file into our project.

 

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

 

Now, the preparation for developing svelte is done.

Conclusion

In this posting, we prepare for developing svelte with VSCode.

we set a linter and formatter as well.

Now, go enjoy svelte!