|
|
|
---
|
|
|
|
title: "\U0001F6E0️ Development tooling"
|
|
|
|
---
|
|
|
|
|
|
|
|
## Base setup
|
|
|
|
|
|
|
|
[VS Codium](https://vscodium.com/) + [Vue - Official extension](https://open-vsx.org/extension/Vue/volar) (previously Volar, :warning: not Vetur) is [the recommended setup](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
|
|
|
|
|
|
|
It provides support for **syntax highlighting in SFCs**, **TypeScript** and **Intellisense** for various Vue-related features.
|
|
|
|
|
|
|
|
## Additional setup
|
|
|
|
|
|
|
|
Some other recommended VS Codium extensions are present in `.vscode/extensions.json` and can be useful:
|
|
|
|
- [ESLint extension](https://open-vsx.org/vscode/item?itemName=dbaeumer.vscode-eslint) integrates ESLint in the editor for realtime linting
|
|
|
|
- [Prettier - Code formatter](https://open-vsx.org/vscode/item?itemName=esbenp.prettier-vscode) integrates Prettier in the editor for e.g. formatting on save
|
|
|
|
- [GraphQL: Syntax Highlighting](https://open-vsx.org/vscode/item?itemName=GraphQL.vscode-graphql-syntax) allows for syntax highlighting of GraphQl code (queries)
|
|
|
|
- [Tailwind CSS IntelliSense](https://open-vsx.org/vscode/item?itemName=bradlc.vscode-tailwindcss)
|
|
|
|
|
|
|
|
## Other useful resources
|
|
|
|
|
|
|
|
- [icones.js.org](https://icones.js.org) is a good resource for icons. It provides many snippets and is made to work with `unplugin-icons`. |
