标签

##安装环境准备

项目环境准备：
vue3+pinia+Ts

node环境

##插件配置

ESlint volar 在项目开发过程中进行代码格式化,对代码进行规则和自定义代码风格。

##自定义代码配置

{
    // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
    // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
    // Placeholders with the same ids are connected.
    // Example:
    "Print to console": {
        // "scope": "javascript,typescript",// 文件生成位置
        "prefix": "v3",
        "body": [
            "",
            "",
            "",
            "",
            ""
        ],
        "description": "快速生成Vue3文件结构"
    }
}

### 安装element-plus按需导入

根据官网配置Vite plugins

在使用时出现eslint校验ElMessage not unde错误

解决：
1、首先在在Vite配置
```js
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
      eslintrc: { enabled: true } //eslint校验规则自动生成文件配置忽略文件、生成.eslintrc-auto-import
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
2、配置.eslintrc-auto-import文件
```js
{
  "globals": {
    "ElMessage": true // 告诉eslint  ElMessage全局使用
  }
}
3、在.eslintrc extends追加`.eslintrc-auto-import`
```js
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting',
    '.eslintrc-auto-import'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  //    配置添加的部分
  rules: {
    'prettier/prettier': [
      'error',
      {
        semi: false,
        wrapAttrbutes: false,
        printWidth: 100,
        endfline: 'off'
      }
    ]
  }
}