紀錄一下 ref source: <a target="_blank" href="https://vueschool.io/articles/vuejs-tutorials/eslint-and-prettier-with-vite-and-vue-js-3/">https://vueschool.io/articles/vuejs-tutorials/eslint-and-prettier-with-vite-and-vue-js-3/</a>
<ol>
<li><pre><code class="lang-plaintext"> npm init vite@latest
</code></pre>
 or
</li>
<li><pre><code class="lang-plaintext"> npm create vuetify
</code></pre>
</li>
<li><pre><code class="lang-plaintext"> npm install --save-dev --save-exact prettier
</code></pre>
</li>
<li><pre><code class="lang-plaintext"> npm install --save-dev eslint eslint-plugin-vue
</code></pre>
</li>
<li><pre><code class="lang-plaintext"> npm install eslint-config-prettier --save-dev
</code></pre>
</li>
<li>in .vscode/settings.json
</li>
</ol>
<pre><code class="lang-plaintext">{
 "editor.formatOnSave": true,
 "editor.codeActionsOnSave": {
 "source.fixAll.eslint": true
 },
 "[vue]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[javascript]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 }
}
</code></pre>

紀錄一下  
ref source: [https://vueschool.io/articles/vuejs-tutorials/eslint-and-prettier-with-vite-and-vue-js-3/](https://vueschool.io/articles/vuejs-tutorials/eslint-and-prettier-with-vite-and-vue-js-3/)

1. ```plaintext
    npm init vite@latest
    ```
    
    or
    
2. ```plaintext
    npm create vuetify
    ```
    
3. ```plaintext
    npm install --save-dev --save-exact prettier 
    ```
    
4. ```plaintext
    npm install --save-dev eslint eslint-plugin-vue 
    ```
    
5. ```plaintext
    npm install eslint-config-prettier --save-dev 
    ```
    
6. in .vscode/settings.json
    

```plaintext
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
```

Setting auto-formatting of vite vue.js 3 project with VSCode

Table of contents

No headings in the article.