VS Code, Svelte and Prettier set up

I recently tried to set up a new project to try out Svelte in more depth. I search everywhere but couldn't get VS Code (e.g. on file save) and Prettier CLI (e.g. running npm run lint) working at the same time. After hours of trial and error, I finally got it to a place I'm happy with. Hopefully, this will help anyone in a similar position.

Install Dependencies

npm i -D parcel-bundler parcel-plugin-svelte prettier prettier-plugin-svelte svelte

svelte because we want to develop apps with it, duh! parcel-bundler parcel-plugin-svelte Svelte works with all the popular bundler tools such as Webpack, Rollup and Parcel. Personally, I'm a big fan of Parcel so I've gone with it here. prettier prettier-plugin-svelte People tend to use a mixture of Eslint and Prettier for code formatting and linting. But I wanted to keep dev dependencies lite, so I'm only using Prettier in this case.

Project Structure & Files

/
|-- package.json
|-- package-lock.json
|-- .prettier
|-- .gitignore
|-- src
     |-- index.js
     |-- index.html
     |-- style.css
     |-- App.svelte
     |-- components
          |-- ...

package.json

When using Svelte with Parcel, one thing to note is to ensure the main property is set to the correct.

{
    "name": "my-svelte-template",
    "version": "0.1.0",
    "private": true,
    "description": "This is not a real repo.",
    "author": "Hao Dong",
    "main": "src/index.js",
    "scripts": {
        "dev": "parcel src/index.html",
        "build": "parcel build src/index.html",
        "lint": "prettier --check 'src/**/*.{html,js,svelte}'",
        "lint:fix": "prettier --write 'src/**/*.{html,js,svelte}'"
    },
    "devDependencies": {
        "parcel-bundler": "^1.12.4",
        "parcel-plugin-svelte": "^4.0.5",
        "prettier": "^1.19.1",
        "prettier-plugin-svelte": "^0.7.0",
        "sass": "^1.24.2",
        "svelte": "^3.16.7"
    }
}

Notice here we are using Prettier CLI to both check linting and auto-fix linting errors. This means we could both check for linting errors and auto fix them in the terminal by running npm run lint and npm run lint:fix respectively. It is a good practice to run at least the lint check in the CI pipeline to ensure code consistency.

What about VS Code, you might ask. We'll cover how to set up auto format each time we save a file in later sections. Unfortunately, the CLI auto format and VS Code auto format shares very little in common so will require two different setups. This is also one of the reasons it took me a while to get it working the way I wanted.

package-lock.json

I'm going to skip package-lock.json since it is a generated file.

.prettierrc

For Prettier I try to leave most of the formatting options as default, with the following exceptions.

{
    "tabWidth": 4,
    "printWidth": 120,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "all"
}

.gitignore

A very standard git ignore file.

.DS_Store
node_modules

# svelte
.cache
dist

# dotenv environment variables file
.env

src/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Svelte with Parcel</title>
        <link rel="stylesheet" href="./styles.css" />
    </head>

    <body>
        <script src="./index.js"></script>
    </body>
</html>

src/index.js

import App from './App.svelte';

const app = new App({
    target: document.body,
    props: {
        name: 'Svelte',
    },
});

export default app;

src/style.css

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  color: #212223;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

src/App.svelte

<script>
    export let name;
</script>

<style>
    h1 {
        text-align: center;
    }
</style>

<h1>Hello {name}!</h1>

VS Code Set Up

Extensions

In order to get the best Svelte support, install the following VS Code extensions:

It might be useful to install these extensions as well, but they are optional.

Settings

Within src folder we have 3 main file types that requires linting and formatting:

*.html will be formatted by Prettier (extension installed above, based on .prettierrc config)
*.svelte will be formatted by Svelte (extension installed above)
*.js will be formatted by Prettier (extension installed above, based on .prettierrc config)

In order to get format on file save working, open Settings (JSON) then add the following options:

{
    ...
    "editor.formatOnSave": true,
    "[svelte]": {
        "editor.defaultFormatter": "JamesBirtles.svelte-vscode"
    }
}

Then open up the different file types and see what VS Code is showing on the bottom status bar. Notice how both JavaScript and HTML have Prettier ticked, and Svelte doesn't.

screenshot of vs code formatting html file with Prettier

screenshot of vs code formatting javascript file with Prettier

screenshot of vs code formatting svelte file with Svelte

As mentioned above the npm run lint and npm run lint:fix will work with Svelte file types no problem. However, Prettier in VS Code for some reason just doesn't want to auto format Svelte files. So I left the auto format to VS Code's Svelte extension instead of the Prettier extension.

Additional Reading

https://www.rockyourcode.com/prettier-and-es-lint-setup-for-svelte-js/