Friday Picks 011

Read more →

An Introduction to Svelte by Dave Ceddia

One of the blogs I follow is Dave Ceddia's. He has a way of breaking down complex topics to the bare minimum. His blog posts provide a good overview of a topic without going too much into details. Although I'm concentrating on learning the ins and outs of React, I still enjoy looking at alternatives. One of them is Svelte. I wrote about Svelte before. My first impression was positive, as it feels like a straightforward framework to learn with lots of power under the hood.
Read more →

Svelte.js: First Impressions

In the last two days, I started learning Svelte.js. I'm positively surprised. Svelte is easy, and it works. React‘s abstraction level is high, especially if you mix in JSX. With Svelte, you stay near “Vanilla-JS-Land.” (Svelte.js compiles down to standard JavaScript.) In a basic setup, your code also divides into three parts: The <script> block where you write JavaScript: you can define variables and write functions (typically event handlers). The CSS block where you write your component-scoped styles.
Read more →

Vim and Svelte.js

Yesterday I explained how you can add linting and formatting support for Svelte.js with ESLint and Prettier. But how can you integrate it into (Neo)Vim and ALE?

  1. Installation Follow the steps here to get up and running with ESLint and Prettier. Install ALE with your favorite Vim plugin manager (I use minpac). optional: Install burner/vim-svelte for syntax highlighting. 2. Configuration There is no native support for .svelte files but you can define an alias.
Read more →

Prettier and ESLint Setup for Svelte.js

Note: updated instructions for eslint-plugin-svelte3 on 2019-10-30.

  1. Installation You need to install the following packages as dev dependencies: npm install –save-dev prettier eslint prettier-plugin-svelte eslint-plugin-svelte3 2. Configuration Create an .eslintrc.json file in your project root directory: { "env": { "browser": true, "es6": true }, "parserOptions": { "ecmaVersion": 2019, "sourceType": "module" }, "plugins": ["svelte3"], "extends": ["eslint:recommended"], "overrides": [ { "files": ["**/*.svelte"], "processor": "svelte3/svelte3" } ], "rules": { "prettier/prettier": "error", "svelte3/lint-template": 2 } } If you want to know more about how to run prettier and eslint together, you can read the prettier documentation.
Read more →