One, create a project

Install VUE-CLI 3 and typescript using NPM

npm i -g @vue/cli typescriptCopy the code

Use the vue create command to quickly scaffold a new project

vue create vue-tsCopy the code

Vue-ts is the name of our project. After executing the command above, the following options appear

Here is a single selection, you can press up/down keys to switch options, press Enter to enter the next step. The two options represent:

  • defaultIs the default, and the following Babel, esLint says only these two will be introduced
  • Manully select featuresYes manual selection

Since we are using Vue+TypeScript, choose Manully Select Features.

Press Enter to go to the next step:



Here is multiple selection, press up/down key to switch options, space bar to select this option, enter key to go to the next step. You can choose the appropriate options based on the actual situation of the project.

I’m going to make a vuE-TS study note here, and I’ll continue to learn how to use Vuex and Router in TypeScript. So choose Babel, Typescript, Router, Vuex, CSS pre-processors, Linter/ Formatter.

Press Enter to go to the next step:



This is asking if you want to use class-style component syntax. To make TypeScript easier to use, we choose Y.

When we don’t know which option to choose, we can just press Enter and use the default option.

Press Enter to go to the next step:



I’m not sure what that means, so I’ll just skip it and press Enter to use the default option.

Press Enter to go to the next step:



This isto ask whether to use the Router’s history mode. If yes, the server will need to configure the index rollback properly in a production environment. This will not affect our demo, press Enter to use the default option again.

Press Enter to go to the next step:



Here is a selection of CSS preprocessors, you can choose one.

Press Enter to go to the next step:



Here is the code checker of choice, I personally prefer ESLint + Prettier. Because Prettier can format not only JS code, but also the template section of CSS and Vue template files.

Press Enter to go to the next step:



This is to select when to format the code, so select Lint on Save.

Press Enter to go to the next step:



Where do you configure Babel, PostCSS, ESLint, etc

  • In dedicated config filesIn a special configuration file

  • In package.jsonThe configuration is in package.json file

We select In dedicated config files,

Press Enter to go to the next step



Do you want to save the selected configuration for reuse next time you build a project?

Let’s skip ahead, press Enter, and wait for the project initialization to complete.

2, configure.prettierrc

When the code checker selects ESLint + Prettier, the configuration item where ESLint conflicts with Prettier is turned off and Prettier is used instead. Prettier – This document lists configuration items where ESLint conflicts with Prettier.

Prettier formats strings into double quotes and automatically adds semicolons to the end of sentences because Prettier is personally used to using single quoted strings and no semicolons at the end of sentences, it requires a separate configuration. The configuration method is also simple:

Create a.prettierrc.js file in the project root (the same directory as package.json) and add the following configuration:

Modify the.eslintrc.js file and add this line of code:



Now let’s see if the configuration is successful. First open sr/main.ts:



As you can see, both the double quoted string and the semicolon at the end of the sentence are wrong, so simply press CTR + S to save and all errors will be corrected automatically.