Creating a Vue project


[TSLint is no longer supported] (, which was previously used, has not been received.

Here, while creating a Vue project, I want to simply set the settings using ESlint and Prettier. The tool I use is vscode.

Select the default project in the form of vue create myproject.

> npx vue create myproject

? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 (*) TypeScript
 () Progressive Web App (PWA) Support
 () Router
 () Vuex
 (*) CSS Pre-processors
>(*) Linter / Formatter
 () Unit Testing
 () E2E Testing

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Y

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
> Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
> ESLint + Prettier
  TSLint (deprecated)

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 () Lint and fix on commit

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

Here, in the first check box, make sure to select Linter / Formatter, and for Linter / Formatter, select ESLint + Prettier.

> cd myproject
> code.

And execute vscode as above.

Setting VSCode

If the following extension is not installed in VSCode, install it.

-ESLint -[Prettier-Code formatter] ( -[Vetur] (

Then, in the vscode settings, add the following.

  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true

So far, when vscode saves a file, it formats it and saves it.

Lastly, if you want to make more detailed settings, create a .prettierrc.json file in the project root folder and make detailed settings. You can make it in the form below.

  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": false,
  "arrowParens": "always"

Please check the link below for details.