1. SvelteKit#

SvelteKit is the official framework for building Svelte applications. It provides a comprehensive set of tools for routing, server-side rendering, and more. With SvelteKit, you can quickly set up a new project and start developing immediately.

npm init svelte@next my-app
cd my-app
npm install
npm run dev

<!-- src/routes/+page.svelte -->
<script>
  export let data;
</script>

<h1>Welcome to {data.title}</h1>

<!-- src/routes/+page.server.js -->
export function load() {
  return {
    title: 'My SvelteKit App'
  };
}

2. VS Code Svelte Extension#

The VS Code Svelte extension offers syntax highlighting, autocompletion, and other features to improve your coding experience. It integrates seamlessly with Visual Studio Code, making it easier to write and debug Svelte code.

# Install the extension from the VS Code marketplace

<script>
  let count = 0;
  // The extension provides autocompletion for Svelte syntax
  $: doubled = count * 2;
</script>

<button on:click={() => count++}>
  Count: {count}
</button>

3. Svelte Devtools#

Svelte Devtools is a browser extension that helps you inspect and debug your Svelte components. It provides a detailed view of your component hierarchy and state, making it easier to identify and fix issues.

# Install the extension from the Chrome or Firefox web store

// Component.svelte
let debugValue = 'test';
$: console.log('Debug:', debugValue); // Viewable in Devtools

4. Prettier#

Prettier is a code formatter that ensures your code is consistently styled. It supports a wide range of languages and integrates with most editors. By using Prettier, you can maintain a clean and readable codebase.

npm install --save-dev prettier

Create a .prettierrc file to configure Prettier:

{
  "singleQuote": true,
  "trailingComma": "es5"
}

// .prettierrc
{
  "svelteSortOrder": "options-scripts-markup-styles",
  "svelteStrictMode": false,
  "svelteBracketNewLine": true,
  "svelteAllowShorthand": true,
  "svelteIndentScriptAndStyle": true
}

5. ESLint#

ESLint helps you identify and fix problems in your JavaScript code. It can be configured to enforce coding standards and catch common errors, improving the overall quality of your code.

npm install --save-dev eslint

Create a .eslintrc.json file to configure ESLint:

{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "node": true
  },
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}

// .eslintrc.cjs
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:svelte/recommended'
  ],
  rules: {
    'svelte/valid-compile': 'error',
    'svelte/no-at-html-tags': 'warn'
  }
};

6. Rollup#

Rollup is a module bundler optimized for Svelte applications. It compiles your code into a single file, making it more efficient and easier to deploy.

npm install --save-dev rollup

Create a rollup.config.js file to configure Rollup:

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js',
  output: {
    file: 'public/build/bundle.js',
    format: 'iife',
    name: 'app'
  },
  plugins: [
    svelte(),
    resolve(),
    commonjs()
  ]
};

// rollup.config.js
export default {
  // ...existing config...
  plugins: [
    svelte({
      compilerOptions: {
        dev: !production
      },
      preprocess: sveltePreprocess({
        sourceMap: !production,
        postcss: true,
      })
    }),
    // Additional useful plugins
    production && terser(),
    css({ output: 'bundle.css' })
  ]
};

7. PostCSS#

PostCSS is a tool for transforming CSS with JavaScript plugins. It allows you to use modern CSS features and optimize your styles for better performance.

npm install --save-dev postcss

Create a postcss.config.js file to configure PostCSS:

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')
  ]
};

<!-- Component.svelte -->
<style lang="postcss">
  .card {
    @apply bg-white rounded-lg shadow-md;
    
    & .title {
      @apply text-xl font-bold;
    }
  }
</style>

8. Tailwind CSS#

Tailwind CSS is a utility-first CSS framework that can be easily integrated with Svelte. It provides a set of predefined classes that you can use to style your components quickly.

npm install tailwindcss

Create a tailwind.config.js file to configure Tailwind CSS:

module.exports = {
  purge: ['./src/**/*.svelte'],
  darkMode: false,
  theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: []
};

<script>
  export let title;
  export let description;
</script>

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">{title}</div>
    <p class="text-gray-700 text-base">
      {description}
    </p>
  </div>
</div>

9. Storybook#

Storybook is a tool for developing UI components in isolation. It allows you to create and test components independently, ensuring they work as expected before integrating them into your application.

npx sb init

Create a main.js file in the .storybook directory to configure Storybook:

module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials']
};

// Button.stories.js
import Button from './Button.svelte';

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    label: { control: 'text' },
    primary: { control: 'boolean' }
  }
};

export const Primary = {
  args: {
    primary: true,
    label: 'Primary Button'
  }
};

10. Jest#

Jest is a testing framework that works well with Svelte applications. It provides a simple and efficient way to write and run tests, ensuring your code is reliable and bug-free.

npm install --save-dev jest

Create a jest.config.js file to configure Jest:

module.exports = {
  transform: {
    '^.+\\.svelte$': 'svelte-jester',
    '^.+\\.js$': 'babel-jest'
  },
  moduleFileExtensions: ['js', 'svelte']
};

// Button.test.js
import '@testing-library/jest-dom';
import { render, fireEvent } from '@testing-library/svelte';
import Button from './Button.svelte';

test('button triggers click handler', async () => {
  const { getByText } = render(Button, { props: { text: 'Click me' } });
  const button = getByText('Click me');
  await fireEvent.click(button);
  expect(button).toHaveClass('clicked');
});

Best Practices#

Conclusion#

Using these tools will help you streamline your Svelte development process and improve your productivity. Experiment with them to find the best setup for your workflow.