Formatting and Linting#
As developers, we want to craft consistent and readable code. It is worth spending a little bit of extra time now to set up formatting and linting tools that will help keep your code clean and enforce good development practices.
Linting is the process of statically analyzing code for problems such as undeclared variables, unused variables and other syntax and best practice issues.
In this lesson, we will configure Prettier and ESLint and look at a few examples of how these tools help developers create more professional and bug-free code.
Prettier.js#
First off, go to the Extensions tab in VSCode and install the Prettier extension. This will integrate Prettier into VSCode.
Next, go to VSCode Preferences > Settings and search for format. Make sure the option Format on Save is checked.
Additionally, you may need to choose esbenp.prettier-vscode in the Default Formatter field under Settings:
After this, head over to the command line under the frontend directory and install the following NPM dev dependencies:
$ npm install --save-dev prettier-plugin-svelte
The last step for setting up Prettier is to create the file frontend/.prettierrc.json containing the Prettier settings below. You can change these according to your own preference - for example, if you like semicolons with JavaScript, change the semi property to true.
{"tabWidth": 2,
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
}
Now, let's see it in action. Open App.svelte and hit Cmd-S or Ctrl-S to save the file. Since we have set Format on Save, VSCode should use Prettier's configuration to format the file.
You should notice that Prettier's settings have been implemented - for example, the semicolons may have been removed and the tab width changed from four to two.
ESLint.js#
Let's go one step further and install and configure ESLint. ESLint will apply a set of recommended rules to keep your code clean and, in some cases, prevent bugs. We'll try a couple of examples once we have completed the set-up.
Again, on the VSCode Extensions tab, install the ESLint extension. Then head back to the command line and under the frontend directory install a few more dev dependencies:
npm install --save-dev eslint@7.0.0 eslint-plugin-svelte3 babel-eslint
You guessed it! Next we need to create the file frontend/.eslintrc.json with the following config:
{ "env": {"browser": true,
"es6": true,
"node": true
},
"parser": "babel-eslint",
"parserOptions": {"ecmaVersion": 2019,
"sourceType": "module"
},
"plugins": ["svelte3"],
"extends": ["eslint:recommended"],
"overrides": [ {"files": ["**/*.svelte"],
"processor": "svelte3/svelte3"
}
]
}
We are going to add ESLint to the npm build command in package.json. (We have not discussed it yet, but npm run build is the command to create a production build of our Svelte app.) We will add the ESLint command to the process so that the build process will fail if there are any linting errors.
Open up package.json and add npx eslint ./src && to the front of both the build and dev scripts:
Change this:
"dev": "vite",
"build": "vite build",
To this:
"dev": "npx eslint ./src && vite",
"build": "npx eslint ./src && vite build",
This will cause ESLint to run and lint the code every time we run a production build or start the local dev environment.
Testing ESLint#
In this section, we are going to purposefully write some bad code and let ESLint warn us about the issues.
First off, run a build from the command line in the frontend directory:
$ npm run build
If there are no errors, then the command should output the following, and explain that the build process created a production bundle under the public directory.
> svelte-app@1.0.0 build /workspace/school-lunch/frontend
> npx eslint ./src && vite
src/main.js ā public/build/bundle.js
created public/build/bundle.js in 426ms
Great. Now open up the App.svelte file in VSCode and add the line console.log(xyz). Can you spot the error? If not, ESLint will tell us in the next step.
<script>
export let name
console.log(xyz)
</script>
Go back to the command line again, and run another build:
$ npm run build
> svelte-app@1.0.0 build /workspace/school-lunch/frontend
> npx eslint ./src && vite
/workspace/school-lunch/frontend/src/App.svelte
4:15 error 'xyz' is not defined no-undef
ā 1 problem (1 error, 0 warnings)
npm ERR! code ELIFECYCLE
Perfect - this shows us ESLint in action. It catches a bug, prevents our production build and tells us that the variable xyz is not defined. If you look closely, you'll notice that it gives the file and the line number where the error was found, making it easy to fix the problem.
We've made great progress. In the next module, we will set up a Svelte router and stub out some pages in our application.