编程规范一：代码检测工具 ESLint

项目基于vue3、vite…

一、项目中安装必要依赖

npm install --save-dev eslint eslint-plugin-vue vite-plugin-eslint

二、vite配置eslint插件

• 1、在vite/plugins 目录下新建eslint-check.js 的plugin

import eslintPlugin from 'vite-plugin-eslint'

export default function createEslintPlugin() {
    return eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
    })
}

• 2、vite.config.js 中引入该 plugin

三、特殊处理 unplugin-auto-import 插件

因为 unplugin-auto-import 插件，自动引入 composition api，不需要再手动引入，大大提升编码体验，但后面eslint的配置中需要针对这个情况处理自动导入问题（.eslintrc.js 的 extends 中引入.eslintrc-auto-import.json）

• 1、安装依赖
  npm install --save-dev unplugin-auto-import

• 2、配置插件文件

import autoImport from 'unplugin-auto-import/vite'

// 实现vue函数的自动导入,这样如ref, computed，watch等就不用手动导入了
export default function createAutoImport() {
    return autoImport({
        imports: [
            'vue',
            'vue-router',
            'pinia'
        ],
        dts: false,
				// eslint报错解决
				eslintrc: {
					// 此处为true运行后会生成.eslintrc-auto-import.json文件
					enabled: true, // 此处第一次运行使用true,之后改为false
					filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
					globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
				}
    })
}

四、配置.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  // .eslintrc-auto-import.json 可以直接使用 ref, computed，watch等就不用手动导入了
  extends: ['plugin:vue/vue3-recommended', 'eslint:recommended', 'prettier', './.eslintrc-auto-import.json'],
  plugins: ['vue', 'prettier'],

  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  rules: {
    'space-before-function-paren': 'off',
    'object-curly-spacing': [
      'error',
      'always',
      {
        objectsInObjects: true
      }
    ]
  }
}