Creating a Vue project
[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
- [Setup Prettier and ESLint for Typescript] (https://www.anthonygonzales.dev/blog/setup-eslint-prettier-with-typescript.html)
- https://prettier.io/
- [Setting the Typescript ESLint] (https://velog.io/@kyusung/eslint-config-3)
- [ESLint-4. Prettier applied] (https://velog.io/@kyusung/eslint-config-4) Send feedback History Saved Community