Vite Vue 3开发环境配置：ESLint、Prettier与Sass的集成

配置Vite、Vue 3、ESLint、Prettier以及Sass，需要按照一系列步骤来进行。以下是基本的步骤：

1. 安装 Vite 和 Vue 3

首先，确保你的项目中已经安装了Vite和Vue 3。如果没有，可以使用以下命令安装：

npm init vite@latest my-vue-app --template vue  
cd my-vue-app  
npm install
npm init vite@latest my-vue-app --template vue  
cd my-vue-app  
npm install
npm init vite@latest my-vue-app --template vue  
cd my-vue-app  
npm install

2. 安装 ESLint

接下来，安装ESLint及其Vue插件：

npm install eslint @vue/eslint-config-prettier eslint-plugin-vue eslint-plugin-prettier --save-dev
npm install eslint @vue/eslint-config-prettier eslint-plugin-vue eslint-plugin-prettier --save-dev
npm install eslint @vue/eslint-config-prettier eslint-plugin-vue eslint-plugin-prettier --save-dev

3. 配置 ESLint

在项目根目录下创建.eslintrc.js文件，并添加以下内容：

module.exports = {  
  root: true,  
  env: {  
    node: true,  
  },  
  extends: [  
    'plugin:vue/vue3-essential',  
    'eslint:recommended',  
    '@vue/prettier',  
    'prettier',  
  ],  
  parserOptions: {  
    parser: 'babel-eslint',  
  },  
  rules: {  
    // 在这里添加你的自定义规则  
  },  
};
module.exports = {  
  root: true,  
  env: {  
    node: true,  
  },  
  extends: [  
    'plugin:vue/vue3-essential',  
    'eslint:recommended',  
    '@vue/prettier',  
    'prettier',  
  ],  
  parserOptions: {  
    parser: 'babel-eslint',  
  },  
  rules: {  
    // 在这里添加你的自定义规则  
  },  
};
module.exports = {  
  root: true,  
  env: {  
    node: true,  
  },  
  extends: [  
    'plugin:vue/vue3-essential',  
    'eslint:recommended',  
    '@vue/prettier',  
    'prettier',  
  ],  
  parserOptions: {  
    parser: 'babel-eslint',  
  },  
  rules: {  
    // 在这里添加你的自定义规则  
  },  
};

4. 安装 Prettier

安装Prettier：

npm install prettier --save-dev
npm install prettier --save-dev
npm install prettier --save-dev

5. 配置 Prettier

在项目根目录下创建.prettierrc文件，并添加以下内容：

{  
  "semi": true,  
  "trailingComma": "es5",  
  "singleQuote": true,  
  "printWidth": 80,  
  "tabWidth": 2  
}
{  
  "semi": true,  
  "trailingComma": "es5",  
  "singleQuote": true,  
  "printWidth": 80,  
  "tabWidth": 2  
}
{  
  "semi": true,  
  "trailingComma": "es5",  
  "singleQuote": true,  
  "printWidth": 80,  
  "tabWidth": 2  
}

6. 安装 Sass

安装Sass及其Vue加载器：

npm install sass sass-loader --save-dev
npm install sass sass-loader --save-dev
npm install sass sass-loader --save-dev

7. 配置 Vite 以支持 Sass

在vite.config.js文件中，添加对Sass的支持：

import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue'  
  
export default defineConfig({  
  plugins: [vue()],  
  css: {  
    preprocessorOptions: {  
      scss: {  
        additionalData: `@import "@/styles/variables.scss";` // 假设你有一个包含变量的Sass文件  
      }  
    }  
  }  
})
import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue'  
  
export default defineConfig({  
  plugins: [vue()],  
  css: {  
    preprocessorOptions: {  
      scss: {  
        additionalData: `@import "@/styles/variables.scss";` // 假设你有一个包含变量的Sass文件  
      }  
    }  
  }  
})
import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue'  
  
export default defineConfig({  
  plugins: [vue()],  
  css: {  
    preprocessorOptions: {  
      scss: {  
        additionalData: `@import "@/styles/variables.scss";` // 假设你有一个包含变量的Sass文件  
      }  
    }  
  }  
})

8. 使用 ESLint 和 Prettier

现在，你可以在你的Vue组件和其他JavaScript文件中使用ESLint和Prettier了。它们将在你保存文件时自动检查和格式化代码。你也可以通过运行以下命令手动检查：

npx eslint . --ext .js,.vue  
npx prettier --check .
npx eslint . --ext .js,.vue  
npx prettier --check .
npx eslint . --ext .js,.vue  
npx prettier --check .

如果你想要在保存文件时自动修复某些ESLint错误，你可以安装并配置一个编辑器插件，如ESLint for VS Code。

这样，你就成功地在Vite和Vue 3项目中配置了ESLint、Prettier和Sass。记得根据你的项目需求调整这些配置。