Using Visual Studio Code

You can use any IDE to code but we recommend using VSCode to get the best experience when working in the Scale UI Radix and Scale UI Radix docs projects.

Workflow

1. Go to File -> New Window or use the [Shift ⇧ + ⌘ + N] shortcut and open the Scale UI Radix workspace. By opening the project in this way you can use the [⌘ + `] shortcut to switch between VSCode windows and keep different versions of TypeScript in each of them while also limiting the scope.
2. Accept and install the recommended extensions and use the workspace recommended TypeScript version.

Extensions

1. Tailwind CSS IntelliSense this extension auto completes the classes for you also supporting custom classes and allows you to inspect by hovering over them.
2. Open In GitHub this extension allows you to easily open a file or a selected text in GitHub and select the current branch or master by using [Shift ⇧ + ⌘ + P] shortcut and selecting Open In GitHub File.
3. ZipFS this allows you to open installed packages like tailwind-merge by clicking on them by supporting the Yarn PNP format, if not you are going to see an error because the package now is a Zip file.
4. Code Spell Checker this check your code for misspellings and show a warning and suggestions to fix it on hover, very useful to avoid typing mistakes.
5. Prettier to format your code using the workspace configuration.
6. Eslint to check any error in the code by using the workspace configuration. Scale UI Radix uses Scale ESLint configuration defined here that extends Vercel's ESLint configuration and is very strict and opinionated compared to other projects.
7. MDX for Visual Studio Code MDX syntax highlighting and language features for Visual Studio Code.
8. Template String Converter this extension allows you to convert a string to a template string automatically by adding the backticks and the dollar sign inside the string.