vue3 +vite+ts projeto real adicionando eslint + mais bonito + guia de armadilhas lint-staged

Inicializar projeto

// 创建一个空的 vue3-ts 项目,
yarn create vite my-vue-app --template vue-ts
// 安装依赖
cd my-vue-app && yarn
// 默认是没有创建git仓库的，这里我们初始化一下
git init

Este modelo não usa configuração eslinte prettierdependências. A seguir, instalamos essas dependências em sequência.

Integrar eslint

Primeiro instalamoseslint

yarn add eslint  -D

Próxima inicialização eslint:

npx eslint --init

Selecione estas opções em ordem:

询问：How would you like to use ESLint? ...
选择：To check syntax and find problems

询问：What type of modules does your project use? ...
选择：JavaScript modules (import/export)

询问：Which framework does your project use? ...
选择：Vue.js

询问：Does your project use TypeScript?
选择：yes

询问：Where does your code run? ...
选择：Browser  (node服务端选择node项)

询问：What format do you want your config file to be in? ...
选择：JavaScript

询问：Would you like to install them now with npm?
选择：yes
...

Neste ponto, instalamos as dependências relevantes e obtivemos um .eslintrc.jsonarquivo configurado:

{
    
    
    // 设置我们的运行环境为浏览器 + es2021 + node ,否则eslint在遇到 Promise，window等全局对象时会报错
    "env": {
    
    
        "browser": true,
        "es2021": true,
        "node": true
    },
    // 继承eslint推荐的规则集，vue基本的规则集，typescript的规则集
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential",
        "plugin:@typescript-eslint/recommended"
    ],
    // 支持ts的最新语法
    "parserOptions": {
    
    
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    // 添加vue和@typescript-eslint插件，增强eslint的能力
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    
    
    }
}

Em seguida, package.jsonadicionamos um lintcomando ao arquivo

{
    
    
    "scripts":{
    
    
        // lint当前项目中的文件并且开启自动修复
        "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
    }
}

Tudo correu muito bem, mas quando executamos o comando lint, descobrimos que os resultados não são os que desejamos:

vueA linha de comando reportará ao analisar o arquivo parsing error. Isso ocorre porque eslintos arquivos vue não são analisados ​​por padrão, então precisamos de um analisador adicional para nos ajudar a analisar os arquivos vue.

Esta etapa foi originalmente plugin:vue/essentialconfigurada para nós por padrão quando herdamos.

Mas seguimos novamente extend, "plugin:@typescript-eslint/recommended"e isso herdou de./node_modules/@typescript-eslint/eslint-plugin/dist/configs/base.js

E nossa ordem de extensão no arquivo de configuração é:

{
    
    
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential",
        "plugin:@typescript-eslint/recommended"
    ],
}

Então vue-eslint-parserestá @typescript-eslint/parsercoberto. Aqui só precisamos parseralterar o externo vue-eslint-parsere parserOptionsadicionar um parser:@typescript-eslint/parseratributo a ele, esta etapa já foi realizada em nosso arquivo de configuração anterior. Você pode ver a descrição oficial eslint-plugin-vue aqui

{
    
    
    ...
    // 新增，解析vue文件
    "parser":"vue-eslint-parser",
    "parserOptions": {
    
    
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    ...
}

A diferença entre os dois parseré que o externo parseré usado para analisar vueo arquivo para que parserOptions eslintpossa ser analisado . O analisador @typescript-eslint/parser` é usado para analisar o código na tag `` no arquivo vue.标签中的内容，而中的，即

A seguir, se continuarmos a executar yarn run lint, descobriremos que outro erro foi relatado:

• `O nó requer um e apenas um nó raiz
• definePropsDefinição não encontrada

Sabemos que esses dois recursos foram introduzidos pelo vue3. O problema pode ser que nossa configuração não suporta o projeto vue3. Examinando as ./node_modules/eslint-plugin-vueconfigurações relevantes no diretório, podemos encontrar o problema. eslint-plugin-vueVários conjuntos de configurações predefinidos são fornecidos.

O conjunto de regras sem vue3-prefixo corresponde ao projeto vue2, e vue3-o do início corresponde ao projeto vue3. Usamos vue/essentialeste conjunto de regras por padrão. Como somos um projeto vue3, devemos usar o conjunto de regras vue3. Aqui usamosvue3-recommended

{
    
    
    "extends": [
        "eslint:recommended",
        -- "plugin:vue/essential",
        ++ "plugin:vue/vue3-recommended",
        "plugin:@typescript-eslint/recommended"
    ],
}

Em seguida, execute-o novamente yarn run linte descubra que um erro ainda será relatado.

Como defineProps é uma macro global pré-compilada, eslintnão sei onde está definida, por isso globalprecisa ser marcada nas opções, porém, após ler eslint-plugin-vueeste arquivo, descobri que ele foi predefinido.

Precisamos apenas habilitar esta variável de ambiente em env:

{
    
    
    "env": {
    
    
        "browser": true,
        "es2021": true,
        "node": true,
        // 开启setup语法糖环境
         ++ "vue/setup-compiler-macros":true
    },
}

Então executamos novamente yarn run lint, graças a Deus, finalmente nenhum erro é relatado.

Adicionar plug-in vscode-eslint

Por enquanto, podemos usar eslint na linha de comando. No entanto, é muito problemático escrever uma linha de código e executar o script de detecção. Felizmente, podemos usá-lo em combinação com plug-ins vscode-eslint.

vscodeDepois de instalar o plug-in , vscode-eslintele irá limpar nosso script quando escrevermos o código e não precisaremos executá-lo novamente yarn run lint. Ao mesmo tempo, podemos criar um novo .vscode/settings.jsonarquivo e habilitar o reparo automático para este projeto.

{
    
    
  "editor.codeActionsOnSave": {
    
    
    "source.fixAll": true
  }
}

Desta forma, ao clicar em ctrl + ssalvar, eslintalguns erros de código serão corrigidos de forma inteligente para você.

Instruções de dependência de instalação

• eslint: ferramenta de linting JavaScript e JSX
• eslint-config-standard: A especificação de código JavaScript atualmente popular
• eslint-plugin-vue: Use ESLint para verificar .vue文件` e ``
• eslint-plugin-prettier: baseado em regras prettierde estilo de códigoeslint
• eslint-config-prettier: Desative todas as regras eslint relacionadas ao formato para resolver o conflito entre as regras mais bonitas e eslint.Certifique-se de colocá-lo no extendsfinal da fila para que ele substitua outras configurações.

Integrado mais bonito

eslintEm comparação, prettierserá mais suave. Prettier não oferece muitas opções de configuração para escolhermos, então podemos apenas encontrar uma configuração online.

yarn add prettier -D

Em seguida, adicione um arquivo de configuração ao diretório raiz do projeto

// .prettierrc.js
module.exports = {
    
    
  printWidth: 80, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
}

Este é o meu arquivo de configuração. Se precisar de mais métodos de configuração, você pode consultar o documento oficial de configuração .

Em seguida, adicione um script ao package.json

{
    
    
    "scripts":{
    
    
        "format": "prettier --write ./**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}"
    }
}

Quando este comando for executado, todos os arquivos do nosso projeto serão formatados.

De um modo geral, também precisamos integrar este plug-in para completar a formatação de salvamento automático. Depois de instalá-lo no mercado de plug-ins, adicione as seguintes regras ao vscode-prettiernosso.vscode/settings.json

{
    
    
   "editor.formatOnSave": true, // 开启自动保存
   "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认格式化工具选择prettier
}

Desta forma, quando escrevemos código em vscode, ele será formatado automaticamente.

Resolva o conflito entre eslint e mais bonito

Idealmente, quando escrevemos código neste estágio, eslintcooperaremos prettierentre si para embelezar nosso código e consertar nosso código que não é de boa qualidade. Porém, a realidade nem sempre é perfeita. Descobriremos que às vezes eslintaparece uma mensagem de erro. Depois de modificá-la, a tela piscará e retornará ao estado de erro, e o reparo automático falhará.

Isso ocorre porque eslintalgumas das regras responsáveis ​​por embelezar o código entram prettierem conflito com as regras. Aqui você pode consultar meu outro blog "Resolvendo o conflito entre Eslint e Prettier" . Aqui damos apenas a solução. Use eslint-config-prettiero conjunto de regras fornecido para substituir eslintregras conflitantes e eslint-plugin-prettieruse eslintas prettierregras para embelezar seu código.

yarn add eslint-config-prettier eslint-plugin-prettier -D

Em seguida, adicione uma configuração no final de .eslintrc.json:extends

  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended" // 新增，必须放在最后面
  ],

Em seguida, reiniciamos o vscode e descobriremos que o conflito desaparece e nosso reparo automático e formatação automática também podem cooperar entre si.

Configurar husky + lint-staged

Teoricamente, na etapa anterior conseguimos obter boas restrições de especificação de desenvolvimento para nosso projeto. No entanto, ainda existem áreas para melhoria:

• Se for conectado no meio do projeto eslint + prettier, se o código original for utilizado yarn run lint , yarn run formatinevitavelmente provocará mudanças em grande escala e até causará conflitos.
• Para alguns usuários que não usam vscodeum editor ou não possuem plug-ins instalados prettier, eslinteles não podem aproveitar a assistência trazida pelos plug-ins e seu código provavelmente não será compatível e não deverá ser enviado à base de código .

Com base nas preocupações acima, a comunidade forneceu husky + lint-stagedsoluções progressivas. lint-stagedÉ uma ferramenta que detecta apenas gita área de teste . É uma ferramenta usada para adicionar ao nosso projeto . É um script que será acionado ao realizar operações git. Por exemplo, um gancho será acionado ao enviar , e um gancho será ser acionado ao inserir informações de envio . Quando usamos o gancho de instalação, podemos executar nosso script para verificar se o código a ser enviado está padronizado durante a operação, e então só podemos verificar os arquivos na área de teste.linthuskygit hookgit hookpre-commitcommit-msghuskypre-commitgit commit

Primeiro instale as dependências

yarn add husky lint-staged -D

Adicione um package.jsonscript preinstallem

{
    
    
    "script":{
    
    
        "prepare": "husky install"
    }
}

prepareO script será executado automaticamente depois, para que seu projeto seja instalado automaticamente depois que yarn installseus amigos confiarem nele . Como já o executamos aqui , precisamos executá-lo manualmente uma vez e então obteremos um diretório .clonehuskyyarn installyarn run prepare.husky

Em seguida, adicionamos um pre-commitgancho ao nosso repositório git e executamos

npx husky add .husky/pre-commit "npx --no-install lint-staged"

pre-commitDesta vez, um script é gerado em nosso diretório .husky

#!/bin/sh 
. "$(dirname "$0")/_/husky.sh"

npx --no-install lint-staged

lint-stagedEm seguida , configuramos e package.jsonadicionamos as seguintes informações de configuração.

{
    
    
  "lint-staged": {
    
    
    "*.{js,vue,ts,jsx,tsx}": [
      "prettier --write",
      "eslint --fix"
    ],
    "*.{html,css,less,scss,md}": [
      "prettier --write"
    ]
  }
}

Depois disso, o código que posteriormente enviamos para a área de teste será eslint+prettierformatado e verificado para garantir ainda mais as especificações do nosso código.

Novos eslint+prettierproblemas de conflito surgem após a configuração do husky + lint-staged

Histórico do problema

WindowsDepois de puxar o código no meu laptop, ao executá-lo , pre-commitaparece o seguinte erro:

Delete `␍`eslint(prettier/prettier) 
复制代码

Aqui estão algumas soluções que tentei:

solução

1. Salvar arquivo Crtl+S

Pressione para Crtl+Ssalvar o arquivo de erro atual e eslinto erro desaparece. Aqui tentei a solução fornecida on-line sem sucesso. Em vez disso, reiniciei o editor vscode e o erro desapareceu. No entanto, esta solução não funciona.

Por exemplo, Yarn execute lint --fix

É mais fácil do que acima, eslinto erro desaparece, mas há mais n registros de alteração de arquivo na área de armazenamento temporário e Working treenenhuma diferença é encontrada na comparação.

commitDesvantagens: Todos os documentos necessários , redundantes.

Referência: "erro Excluir ⏎ mais bonito/mais bonito" em arquivos .vue ``

3. Configure o arquivo .prettierrc

Basta escrevê-lo no arquivo no diretório raiz do projeto .prettierrc. Na verdade, não permite prettiera detecção do formato no final de cada linha do arquivo.

"endOfLine": "auto" 

Desvantagens: Não é compatível com o desenvolvimento multiplataforma e não é perfeito em termos de engenharia front-end.

[参考资料：Por que continuo ficando Delete 'cr' mais bonito/mais bonito]?

4. Troca com um clique através do IDE

Este é o método fornecido pelos colegas Nuggets na área de comentários. Geralmente, a barra de status abaixo do IDE fornecerá uma ferramenta para "mudar a sequência de fim de linha". sequência de fim de linha com um clique.

Desvantagens: Só pode reparar o arquivo atual, mas não pode resolver o problema de erro de todo o projeto.

5. Melhor solução

Fonte do problema:

O culpado foi gituma propriedade de configuração de:core.autocrlf

Por motivos históricos, as quebras de linha nos arquivos de texto windowsabaixo e abaixo são inconsistentes.linux

* Windows在换行的时候，同时使用了回车符CR(carriage-return character)和换行符LF(linefeed character) 

* 而Mac和Linux系统，仅仅使用了换行符LF 

* 老版本的Mac系统使用的是回车符CR 

janelas	Linux/Mac	Mac antigo (pré-OSX
CRLF	SE	CR
'\n\r'	'\n'	'\r'

Portanto, podem surgir problemas de incompatibilidade quando arquivos de texto são criados e usados ​​em sistemas diferentes.

Por padrão, o código enviado no armazém do meu projeto é Linuxo código enviado no ambiente e o arquivo termina com LF(necessidades de engenharia, padrões unificados).

Quando eu uso código windowsde computador git clone, se my autocrlf(instalado windowsem git, esta opção tem como padrão true) for true, então cada linha do arquivo será automaticamente convertida para CRLFterminar com. Se você não fizer nenhuma modificação no arquivo, você será avisado ao pre-commitexecutar eslintExcluir CR.

Agora você pode entender ctrl+sporque yarn run lint --fixo programa pode corrigir eslinto erro, pois Gitele é CRLFconvertido automaticamente para o formato LF.

Melhores Práticas:

Agora VScode, Notepad++o editor é capaz de reconhecer automaticamente se o caractere de nova linha do arquivo LFainda é CRLF. Se você estiver usando windows, a codificação do arquivo é UTF-8e contém chinês, é melhor autocrlfdefini-la globalmente false.

git config --global core.autocrlf false

Nota: gitApós a configuração global, você precisa extrair o código novamente.

Como todas as janelas do nosso grupo são usadas, todos os .prettierrc são configurados diretamente.

endOfLine: 'crlf', // Windows

Visão geral do arquivo de configuração

// package.json
{
    
    
  "name": "my-vue-app",
  "version": "0.0.0",
  "scripts": {
    
    
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
    "format": "prettier --write ./**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}",
    "prepare": "husky install"
  },
  "dependencies": {
    
    
    "vue": "^3.2.25"
  },
   "devDependencies": {
    
    
    "@types/node": "^16.3.1",
    "@typescript-eslint/eslint-plugin": "^5.22.0",
    "@typescript-eslint/parser": "^5.22.0",
    "@vitejs/plugin-vue": "^1.2.4",
    "@vitejs/plugin-vue-jsx": "^1.1.6",
    "@vue/compiler-sfc": "^3.0.5",
    "eslint": "^8.15.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.7.1",
    "husky": "^8.0.1",
    "lint-staged": "^12.4.1",
    "prettier": "^2.6.2",
    "typescript": "^4.3.2",
    "vite": "^2.8.6",
    "vue-tsc": "^0.33.9"
  }
  "devDependencies": {
    
    
    "@typescript-eslint/eslint-plugin": "^5.7.0",
    "@typescript-eslint/parser": "^5.7.0",
    "@vitejs/plugin-vue": "^2.0.0",
    "eslint": "^8.4.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.2.0",
    "husky": "^7.0.4",
    "lint-staged": "^12.1.3",
    "prettier": "^2.5.1",
    "typescript": "^4.4.4",
    "vite": "^2.7.2",
    "vue-tsc": "^0.29.8"
  },
  "lint-staged": {
    
    
    "*.{js,vue,ts,jsx,tsx}": [
      "prettier --write",
      "eslint --fix"
    ],
    "*.{html,css,less,scss,md}": [
      "prettier --write"
    ]
  }
}

// .eslintrc.js
module.exports = {
    
    
  // 设置我们的运行环境为浏览器 + es2021 + node ,否则eslint在遇到 Promise，window等全局对象时会报错
  env: {
    
    
    browser: true,
    es2021: true,
    node: true,
    // 开启setup语法糖环境
    'vue/setup-compiler-macros': true,
  },

  // 继承eslint推荐的规则集，vue基本的规则集，typescript的规则集
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'standard', // 格式化规范
    'plugin:prettier/recommended', // 新增，必须放在最后面,prettier规则覆盖与eslint冲突的规则
    'prettier', // 避免vue 与 prettier冲突
    'eslint:recommended',
  ],

  // 定义ESLint的解析器
  parser: 'vue-eslint-parser',

  // 支持ts的最新语法
  parserOptions: {
    
    
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },

  // 添加vue和@typescript-eslint插件，增强eslint的能力
  plugins: ['vue', '@typescript-eslint', 'prettier'],

  rules: {
    
    
    // "off"或者0    //关闭规则关闭
    // "warn"或者1    //在打开的规则作为警告（不影响退出代码）
    // "error"或者2    //把规则作为一个错误（退出代码触发时为1）

    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 解析vue模板错误规则
    'vue/no-parsing-error': [
      2,
      {
    
    
        'x-invalid-end-tag': false,
        'missing-semicolon-after-character-reference': false,
      },
    ],
    'no-unused-expressions': ['error', {
    
     allowShortCircuit: true, allowTernary: true }], // 允许使用短路、三目
    'no-param-reassign': ['error', {
    
     props: false }], // 函数形参可修改
    'vue/multi-word-component-names': 'off', // eslint-plugin-vue @8版本中新增了不少的规则，第一条就是 **‘vue/multi-word-component-names’: ‘error’,**所有index.vue 会报错，解决方法:
    'no-new-object': 'off', // 关闭不可以new对象的规则
    'no-explicit-any': 'off', // 可以使用any，但请尽量不使用any
    '@typescript-eslint/no-explicit-any': 'off', // ts可以使用any
    'vue/v-on-event-hyphenation': 'off', // 关闭事件命名样式需要用连字符
  },
};

// .prettierrc.js

/** 
  tips：
    endOfLine: 'crlf' 因为eslint和prettier就这个问题上不一致互相冲突，我们这里统一使用Windows系统的.
    如果是有mac使用需求的请使用git config --global core.autocrlf false解决
 */
module.exports = {
    
    
  printWidth: 100, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
  endOfLine: 'crlf', // Windows
};



// .vscode/settings.json
{
    
    
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    
    
    "source.fixAll": true
  }
}

// .husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install lint-staged

Agradecimentos

referência:

Prettier + Stylelint + ESlint no projeto Mu Xiaobai configura
eslint-plugin-vue
Yu Zheng - Excluir ␍eslint (mais bonito/mais bonito) solução errada
Mais bonito + Stylelint + ESlint no projeto Yu Mo configura
Eslint e Prettier resolução de conflitos e registro de problemas eslint

Obrigado a todos os autores de código aberto