Ensure your code is consistently formatted in Visual Studio Code by following these steps.
1. Install VS Code Extensions
To enhance your development experience, install the following extensions in Visual Studio Code:
- Prettier - Code formatter : Prettier will help format your code automatically.
- Format on auto save : This extension enables code formatting on auto-save.
2. Configure VS Code for Auto Formatting
You can configure Visual Studio Code for auto-formatting by following these steps:
Open your command palette (Command + Shift + P) or Ctrl+Shift+P.
Look for "Preferences: Open User Settings (JSON)" and paste the following key value pairs at the end:
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"files.autoSave": "afterDelay",
3. Install dependencies in the source folder
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier prettier typescript
4. Create new file .eslintrc with the below config
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["@typescript-eslint"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"prettier"
],
"rules": {
"@typescript-eslint/no-unused-vars": "error",
"@typescript-eslint/consistent-type-definitions": ["error", "type"]
},
"env": {
"browser": false,
"es2021": true
}
}
5. Create new file .prettierrc with the below config
{
"singleQuote": true,
"tabWidth": 4,
"semi": true,
"trailingComma": "all",
"useTabs": false
}
Top comments (0)