This guide will walk you through configuring a Vue.js project with ESLint 9.13.0, Prettier, and TypeScript, to enable automatic code formatting and linting on save in Visual Studio Code.
1. Create a New Vue Project
Start by creating a new Vue project:
npm create vue@latest
Navigate into the project directory:
cd your-project-directory
2. Install and Update Dependencies
Install the project dependencies:
npm install
Then, use ncu (Node Check Updates) to update the project dependencies:
npx ncu -u
npm install
3. Prerequisites Add ESLint, Prettier, and TypeScript Packages
This configuration requires the following NPM packages to be installed either locally or globally:
prettier
eslint prettier-eslint
@typescript-eslint/parser
typescript
vue-eslint-parser
@vue/eslint-config-typescript
@vue/eslint-config-prettier
Install the necessary development dependencies with pnpm or npm:
pnpm install -D prettier eslint prettier-eslint @typescript-eslint/parser typescript vue-eslint-parser @vue/eslint-config-typescript @vue/eslint-config-prettier
4. Initialize ESLint Configuration
Run the following command to set up your ESLint configuration:
npm init @eslint/config@latest
When prompted, make the following selections to configure ESLint:
How would you like to use ESLint?: To check syntax and find problems.
What type of modules does your project use?: CommonJS (require/exports).
Which framework does your project use?: Vue.js.
Does your project use TypeScript?: Yes.
Where does your code run?: Browser.- When asked if you'd like to install dependencies (
eslint,globals,@eslint/js,@typescript-eslint,eslint-plugin-vue), choose Yes and use npm as the package manager.
5. Add ESLint Flat Config
To ensure ESLint works with the new Flat Config format, make sure to include the necessary configuration in your eslint.config.mjs file. Adjustments for this might depend on your specific setup.
import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import prettier from 'eslint-plugin-prettier/recommended';
import vueConfigTypescript from '@vue/eslint-config-typescript';
import vueConfigPrettier from '@vue/eslint-config-prettier';
/** @type {import('eslint').Linter.Config[]} */
export default [
{
languageOptions: {
globals: {
...globals.browser,
...globals.node,
},
},
},
// js
pluginJs.configs.recommended,
{
rules: {
'no-unused-vars': 'off',
'no-undef': 'off',
},
},
// ts
...tseslint.configs.recommended,
{
rules: {
'@typescript-eslint/no-unused-vars': 'warn',
'@typescript-eslint/no-explicit-any': 'warn',
},
},
// vue
...pluginVue.configs['flat/recommended'],
{
files: ['*.vue', '**/*.vue'],
languageOptions: {
parserOptions: {
parser: tseslint.parser,
},
},
},
{
rules: {
...vueConfigTypescript.rules,
...vueConfigPrettier.rules,
'prettier/prettier': [
'warn',
{
singleQuote: true,
},
],
'vue/multi-word-component-names': 'off',
'vue/attribute-hyphenation': 'off',
'vue/no-v-html': 'off',
'vue/v-on-event-hyphenation': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/no-require-imports': 'off',
'@typescript-eslint/no-explicit-any': 'off',
},
},
{
ignores: ['node_modules', '.nuxt', '.output', 'dist'],
},
// prettier
prettier,
{
rules: {
'prettier/prettier': ['warn', { singleQuote: true }],
},
},
];
6. Install VSCode Extension for Prettier-ESLint Integration
To enable auto-formatting on save with Prettier and ESLint, install the following Visual Studio Code extension:
Prettier ESLint: Download here
7. Add Extension Recommendations
To recommend the extension for your project, add it to the .vscode/extensions.json file:
{
"recommendations": [
"rvest.vs-code-prettier-eslint"
]
}
8. Restart VSCode
After configuring your project and installing the extension, restart Visual Studio Code to ensure that autosave and autoformat work as expected.
Summary
Your project should now be set up with:
- ESLint 9.13.0 with TypeScript and Vue.js support
- Prettier integration for consistent code formatting
- Autoformatting on save in VSCode using the Prettier ESLint extension
SOCIAL SHARE CARD GENERATOR