Vite configura código de especificação Eslint

Depois de experimentar o desenvolvimento colaborativo de projetos relativamente grandes, as especificações de código tornaram-se uma questão espinhosa para o desenvolvimento colaborativo em equipe. Hoje, vou compilar um resumo das especificações do editor->processo de escrita de código do zero.

1. Estilo de código unificado

Recomenda-se usar EditorConfigconfiguração para padronizar a inconsistência nos estilos de código causada por diferentes editores e diferentes configurações de editor.

Crie .editorconfigum arquivo de configuração no diretório raiz do projeto

# 表示是最顶层的 EditorConfig 配置文件
root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.py] # 表示仅 py文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

Deve-se observar aqui que se você VSCodeprecisar baixar plug-ins EditorConfig VS Codee outros compiladores ( WebStorm, IDEA), poderá configurá-los diretamente.

2. Configuração Eslint integrada

1. Instalar

   npm i eslint -D
   fio adicionar eslint --dev

2. Configuração inicial, aqui os itens de configuração são determinados com base no ambiente de desenvolvimento atual, estrutura e estilo de projeto.

   npx eslint --init

   (1): Como usar Eslint, aqui escolhemos a terceira opção: verificar sintaxe, encontrar problemas e aplicar estilo de código

   

   (2): O tipo modular utilizado no projeto atual, escolhemos aquiJavascript modules

   

   (3): A estrutura usada pelo projeto atual,Vue.js

   

   (4): Se deve ser usado Typescript. O ambiente que construímos até este ponto ainda não foi configurado TS, então ignore-o por enquanto.

   

   (5): Ambiente de execução, aqui escolhemos o navegador

   

   (6): Escolha um guia de estilo de código. Aqui escolhemos o mais popular.Airbnb

   
   

   (7): JavascriptEstilo de seleção final

   

   (8): A inicialização está concluída, qual usar para instalar os plug-ins necessários, aqui escolhemosyarn

   

   (9): Adicionar especificação de detecção automática Viteem tempo de execuçãoeslint

   fio adicionar vite-plugin-eslint --D

   import {
         
          defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import eslintPlugin from 'vite-plugin-eslint'
   
   export default defineConfig({
         
         
   	 plugins: [
   	    vue(),
   	    // 增加下面的配置项,这样在运行时就能检查 eslint 规范
   	    eslintPlugin({
         
         
   	      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
   	    })
   	  ]
   })
   

   (10): eslintrc.jsArquivo de configuração

   1. Instalar babelplug-in

      fio adicionar @babel/core @babel/eslint-parser --dev

   2. Configuração EslintConfiguração básica

      module.exports = {
              
              
        env: {
              
              
          browser: true,
          node: true
        },
        extends: [
          "eslint:recommended", // 使用推荐的eslint
          'plugin:vue/vue3-recommended' // 使用插件支持vue3
        ],
        parserOptions: {
              
              
          parser: '@babel/eslint-parser',
          sourceType: 'module',
          ecmaVersion: 12,
          allowImportExportEverywhere: true, // 不限制eslint对import使用位置
          ecmaFeatures: {
              
              
            modules: true,
            legacyDecorators: true
          },
          requireConfigFile: false // 解决报错：vue--Parsing error: No Babel config file detected for
        },
        plugins: [
          'vue'
        ],
        rules: {
              
              
        	...
        }
      }
      

   3. Eslint rulesRegras de Configuração
      Aqui você pode configurar as regras correspondentes de acordo com as especificações da equipe, e postar algumas das minhas regras. Mais configurações podem ser encontradas no site oficial: configuração de regras eslint

      'semi': ['warn', 'never'],           // 禁止尾部使用分号
      'no-console': 'warn',                // 禁止出现console
      'no-debugger': 'warn',               // 禁止出现debugger
      'no-duplicate-case': 'warn',         // 禁止出现重复case
      'no-empty': 'warn',                  // 禁止出现空语句块
      'no-extra-parens': 'warn',           // 禁止不必要的括号
      'no-func-assign': 'warn',            // 禁止对Function声明重新赋值
      'no-unreachable': 'warn',            // 禁止出现[return|throw]之后的代码块
      'no-else-return': 'warn',            // 禁止if语句中return语句之后有else块
      'no-empty-function': 'warn',         // 禁止出现空的函数块
      'no-lone-blocks': 'warn',            // 禁用不必要的嵌套块
      'no-multi-spaces': 'warn',           // 禁止使用多个空格
      'no-redeclare': 'warn',              // 禁止多次声明同一变量
      'no-return-assign': 'warn',          // 禁止在return语句中使用赋值语句
      'no-return-await': 'warn',           // 禁用不必要的[return/await]
      'no-self-compare': 'warn',           // 禁止自身比较表达式
      'no-useless-catch': 'warn',          // 禁止不必要的catch子句
      'no-useless-return': 'warn',         // 禁止不必要的return语句
      'no-mixed-spaces-and-tabs': 'warn',  // 禁止空格和tab的混合缩进
      'no-multiple-empty-lines': 'warn',   // 禁止出现多行空行
      'no-trailing-spaces': 'warn',        // 禁止一行结束后面不要有空格
      'no-useless-call': 'warn',           // 禁止不必要的.call()和.apply()
      'no-var': 'warn',                    // 禁止出现var用let和const代替
      'no-delete-var': 'off',              // 允许出现delete变量的使用
      'no-shadow': 'off',                  // 允许变量声明与外层作用域的变量同名
      ...
      

   (11): Inicie o projeto e teste o efeito

   Como você pode ver, funciona perfeitamente