原來一直使用Vue2開發(fā)項(xiàng)目，并且沒有經(jīng)歷過自己手動(dòng)創(chuàng)建項(xiàng)目，以前都是直接在vue-element-admin或者antd-admin官方給出的源碼上做修改，由于各種依賴、插件，項(xiàng)目中集成的都有，所以沒有關(guān)注過這方面的寫法，最近在家休息，也沒事可干，就自己想著搭建一個(gè)vue3+vite2的項(xiàng)目來玩玩，一上手就感覺好多東西都玩兒不了，首先說說這個(gè)代碼自動(dòng)格式化吧？費(fèi)了老大勁兒了。在這個(gè)過程中記錄了一些步驟，希望能給新入手的朋友帶來一些幫助。

項(xiàng)目的創(chuàng)建就不一步步的說明了，您可以參照Vite中文網(wǎng) (vitejs.cn),官方給的信息還是比較詳細(xì)易上手的。

• 我們在項(xiàng)目總安裝如下依賴：

（1）安裝ESLint：

npm i -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin

（2）安裝Prettier

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

• 我們在根目錄下新建.eslintrc.js文件

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    parsar: '@typescript-eslint/parsar',
    ecmaVersion: 2020,
    sourceType: 'module'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

• 在項(xiàng)目跟目錄下新建 .prettierrc.js 文件

module.exports = {
  printWidth: 120, // 換行字符串閾值
  tabWidth: 2, // 設(shè)置工具每一個(gè)水平縮進(jìn)的空格數(shù)
  useTabs: false,
  semi: false, // 句末是否加分號
  vueIndentScriptAndStyle: true,
  singleQuote: true, // 用單引號
  trailingComma: 'none', // 最后一個(gè)對象元素符加逗號
  bracketSpacing: true,
  jsxBracketSameLine: true, // jsx > 是否另取一行
  arrowParens: 'always', // 不需要寫文件開頭的 @prettier
  insertPragma: false, // 不需要自動(dòng)在文件開頭加入 @prettier
  endOfLine: 'auto' // 換行符使用 auto 有些地方說的是推薦使用lf
}

• 在根目錄下新建一個(gè).vscode文件夾。在里面再新建一個(gè).settings.json，用來設(shè)置vscode的全局配置,字體大小什么的可以根據(jù)自己的喜好定義。

{
  "editor.fontSize": 20, // 編輯器字體大小
  "terminal.integrated.fontSize": 18,   // terminal 框的字體大小
  "editor.tabSize": 2, // Tab 的大小 2個(gè)空格
  "editor.formatOnSave": true, // 保存是格式化
  "prettier.singleQuote": true, // 單引號
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    "typescript",
    "typescriptreact"
  ],
 
}

• 重啟vscode 即可生效。

先這樣了，接下來有時(shí)間了玩玩husky，以前沒有用過，看網(wǎng)上的介紹有意思的，有好的文章可以推薦一下，謝謝