从零搭建 Vue3 + VIte + Ts 项目 —— 并集成eslint 、prettier、stylelint

在搭建一个新的Vue3 + Vite + TypeScript项目并且集成ESLint、Prettier和Stylelint的过程中，你可以遵循以下步骤：

1. 安装或更新Node.js和npm到最新版本。

2. 安装Vue CLI：

   
   
   
   npm install -g @vue/cli

3. 创建一个新的Vite项目使用Vue CLI：

   
   
   
   vue create my-vite-project

   在创建过程中，选择Vite作为构建工具，并且配置TypeScript支持。

4. 进入项目目录：

   
   
   
   cd my-vite-project

5. 安装ESLint、Prettier和Stylelint及其插件：

   
   
   
   npm install --save-dev eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier stylelint stylelint-config-standard stylelint-plugin-standard

6. 创建.eslintrc.js、.prettierrc.js和.stylelintrc.js配置文件，并添加基本配置：

   .eslintrc.js:

   
   
   
   module.exports = {
     extends: [
       'plugin:vue/vue3-essential',
       'eslint:recommended',
       'plugin:prettier/recommended'
     ],
     rules: {
       // 自定义规则
     }
   };

   .prettierrc.js:

   
   
   
   module.exports = {
     semi: false,
     singleQuote: true,
     trailingComma: 'es5',
     printWidth: 80,
     tabWidth: 2,
     useTabs: false,
     bracketSpacing: true,
     jsxBracketSameLine: false,
     arrowParens: 'avoid',
     endOfLine: 'auto'
   };

   .stylelintrc.js:

   
   
   
   {
     "extends": "stylelint-config-standard",
     "rules": {
       // 自定义规则
     }
   }

7. 在package.json中添加lint脚本：

   
   
   
   "scripts": {
     "lint:js": "eslint --ext .js,.vue,.ts,.tsx src",
     "lint:styles": "stylelint '**/*.{css,scss,sass,less}'",
     "lint": "npm run lint:js && npm run lint:styles",
     "format": "npm run lint:js -- --fix && npm run lint:styles -- --fix"
   }

8. 运行lint检查：

   
   
   
   npm run lint

9. 自动格式化代码：

   
   
   
   npm run format

这样你就拥有了一个配置了ESLint、Prettier和Stylelint的Vue3 + Vite + TypeScript项目。在开发过程中，你可以运行npm run lint来检查代码格式问题，运行npm run format来自动修正这些问题。