Creating a Vue project

vscode-vue

[TSLint is no longer supported] (https://www.npmjs.com/package/tslint), 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)
  Less
  Stylus

? 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] (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) -[Vetur] (https://marketplace.visualstudio.com/items?itemName=octref.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.

Reference