Estilo de código e configuração desenvolvidos pela equipe ESLint

Estilo de codificação para desenvolvimento de equipes

Em uma equipe desenvolvendo o mesmo projeto, o estilo de código de cada membro deve ser consistente.

Por exemplo:

① Strings em JS são representadas uniformemente por aspas simples

② Recuo de código, use dois espaços uniformemente

③ >2 linhas em branco consecutivas não são permitidas

④ Ao final da declaração, um ponto e vírgula deve ser adicionado

⑤ ......

Observe que as regras acima não são fixas. Só para ilustrar, por exemplo, o projeto da minha empresa exige um ponto e vírgula no final da declaração, o que também é possível.

Significa apenas que o estilo de código de uma equipe deve ser unificado.

Como garantir um estilo de código uniforme

Use a ferramenta de inspeção de código ESLint.

Depois de usar o ESlint, os programadores são forçados a usar o estilo de código prescrito para desenvolvimento.

Se as regras forem violadas, o código relatará um erro.

O que é ESLint

Conceito oficial: ESLint é uma ferramenta de linting JavaScript e JSX combinável.

Compreensão popular: uma ferramenta para restringir o estilo de codificação dos membros da equipe.

Site oficial: ESLint - Ferramenta de inspeção de código JavaScript conectável - ESLint Chinese Documentation ESLint é uma regra de sintaxe JavaScript conectável e configurável e uma ferramenta de inspeção de estilo de código. O ESLint pode ajudá-lo a escrever facilmente código JavaScript de alta qualidade https://eslint.bootcss.com/

Quais são os benefícios do ESLint

Certifique-se de que o estilo de código escrito seja consistente quando a equipe colaborar no desenvolvimento.

Como usar o ESLint para verificar o estilo de código no projeto

Depois de instalar o projeto por meio da ferramenta de scaffolding @vue/cli, o eslint foi instalado e configurado por padrão.

Usaremos as regras padrão estipuladas pelo plug-in eslint do Vue para inspeção de código. Observe que não são as regras padrão oficiais do eslint.

Se você precisar modificar as regras, consulte o site oficial .

Demonstra como configurar o ESlint

As duas configurações mostradas abaixo devem ser configuradas . Está relacionado às configurações posteriores do vscode.

Em relação à configuração do ESLint, ele precisa ser colocado no arquivo de configuração.

Em relação ao arquivo de configuração do ESLint, o oficial tem instruções detalhadas, claro, muito detalhadas (Luo Suo)

Para um projeto, os itens de configuração do ESLint:

• Coloque-o .eslintrc.jsno ; se você usar @vue/[email protected] para criar um projeto como este
• Coloque-o no nó package.jsonno eslintConfig; se você usar @vue/cli5.0.x para criar um projeto como este

Independentemente do arquivo acima, encontramos ruleso nó , este rulesnó é para configurar as regras ESLint

Por exemplo, se configurarmos o final de cada instrução sem adicionar um ponto e vírgula, precisamos adicionar as seguintes regras ao rulesnó :

"rules": {
  "semi": ["error", "never"]
}

O arquivo de configuração foi modificado e o projeto precisa ser reiniciado (a janela do terminal precisa ser reiniciada com npm run serve)

Por exemplo, para configurar se deve adicionar um espaço entre "nome da função" e "parênteses", você precisa adicionar rulesas seguintes regras ao nó:

"rules": {
  "space-before-function-paren": [
    "error",
    {
      "anonymous": "always",
      "named": "never",
      "asyncArrow": "always"
    }
  ]
}

O arquivo de configuração foi modificado e o projeto precisa ser reiniciado (a janela do terminal precisa ser reiniciada com npm run serve)

Explicação das regras acima:

"anonymous": "always"     匿名函数小括号前，需要空格。比如 setTimeout(function () {})
"named": "never"          有名字的方法，不需要空格。比如 abc() {}
"asyncArrow": "always"    箭头函数，需要空格。比如 aaaa(async data => {})

teste

Abra-o src/App.vue, no código JS, coloque um ponto e vírgula no final de qualquer instrução, e tente ver se há alguma mensagem de erro no terminal ou navegador.

import HelloWorld from './components/HelloWorld.vue'
let a = 2
console.log(a); // 这里加了一个分号

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods: {
    add() {}
  }
}

 Remova o ponto e vírgula no código e tente novamente.

Dessa forma, ao escrever código no futuro, todos devem usar um estilo de código consistente.

---

---

---

configuração do plug-in vscode

Plugins que precisam ser instalados e desinstalados
1. Plugins que precisam ser desinstalados
        ○JS-CSS-HTML Formatter
        ○Beautify
        ○Existem outros plugins para código de formatação

desinstalado para evitar conflitos

2. Plugins que precisam ser instalados

•       Plugin de conclusão de caminho, usado em vue
  • Path Intellisense
  • Path Intellisense - Visual Studio Marketplace
• • Plug-in de formatação de código (ajusta automaticamente o formato do código)
    Prettier - Formatador de código
    Prettier - Formatador de código - Visual Studio Marketplace
  • Plugin de prompt de sintaxe Vue (completa automaticamente a sintaxe vue)
    Vue 3 Snippets
  • Trechos do Vue 3 - Visual Studio Marketplace
  • Plug-in de conclusão de código ElementUI (uma biblioteca de componentes usada posteriormente)
    Element UI Snippets
  • Trechos de elementos de interface do usuário - Visual Studio Marketplace
  • Ferramenta de verificação de formatação de código (muito importante)
    ESLint
    ESLint - Visual Studio Marketplace
  • Plug-in de formatação de sintaxe Vue, plug-in de realce de código de arquivo
    vue Vetur
    Vetur - Visual Studio Marketplace

Resumo da instalação do plug-in

• Se você entender o que seu plug-in faz, basta instalar o plug-in acima
• Se você não entender para que servem seus plug-ins, desinstale todos os plug-ins e instale os plug-ins mostrados na figura abaixo

Por que você precisa instalar o plug-in ESLint

Projetos anteriores usaram ESLint para verificar nosso código.

No entanto, ao escrever código, é inevitável fazer códigos "errados", não é realmente um código errado, mas não atende aos requisitos do projeto.

Esse tipo de "escrita errada", o vscode não foi solicitado.

Depois de instalar o plug-in ESlint do vscode, quando "escrevermos o código errado", o vscode nos dará um prompt.

Após a instalação do plug-in, ele precisa ser configurado. Para configuração, consulte a configuração do plug-in vscode posterior para obter detalhes

Por que você precisa do plug-in de código formatado Prettier

Formatar o código é converter automaticamente o código mal formatado em um formato que atenda aos requisitos.

O plug-in Prettier pode ser combinado com o ESLint.

Em outras palavras, o código formatado com o Prettier atende apenas aos requisitos do ESlint.

Após a instalação do plug-in, ele precisa ser configurado. Para configuração, consulte a configuração do plug-in vscode posterior para obter detalhes

---

Configurar plug-ins ESlint e Prettier

Observe que a configuração do ESlint aqui se refere a um plug-in chamado ESlint que configura o vscode.

Abra a configuração do vscode (tecla de atalho Ctrl + ,) para abrir a interface de configuração do vscode.

Clique no ícone "Abrir configurações (json)" no canto superior direito da interface de configurações:

Após a abertura, você verá o código com a seguinte estrutura:

Observe que a estrutura é a mesma, porque as configurações do vscode de todos têm suas próprias vantagens, portanto, o código não é necessariamente o mesmo.

{
    // =====================================================
    // 一会将代码复制到这里
    // =====================================================
    "workbench.iconTheme": "helium-icon-theme",
    "workbench.colorTheme": "laotang dark",
    "files.autoSave": "onFocusChange",
    "editor.fontFamily": "Menlo, 'Fira Code', 'FuraMono NF', Monaco, monospace, 'Courier New'",
    "editor.formatOnPaste": true,
    "editor.minimap.enabled": false,
    "[markdown]": {
        "editor.quickSuggestions": true
    }
}

Copie o código de configuração abaixo para o local especificado acima .

// prettier 的配置文件存放路径
"prettier.configPath": "C:\\Users\\xiafan\\.prettierrc",
// ---------------------------------------
// 路径提示
"path-intellisense.mappings": {
  "@": "${workspaceRoot}/src"
},
// ---------------------------------------
// 开启编辑器的保存自动格式化功能
"editor.formatOnSave": true,
// ESLint 插件的配置
"editor.codeActionsOnSave": {
  "source.fixAll": true
},
"eslint.alwaysShowStatus": true,
// ---------------------------------------
// 每行文字个数超出此限制将会被迫换行
"prettier.printWidth": 100,
// 使用单引号替换双引号
"prettier.singleQuote": true,
"prettier.arrowParens": "avoid",
"prettier.trailingComma": "none",
"prettier.semi": false,
// ---------------------------------------
// 设置 .vue 文件中，HTML代码的格式化插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 忽略警告信息
"vetur.ignoreProjectWarning": true,
// 防止自动导入
"vetur.completion.autoImport": false,
// 不验证 .vue 组件的模板结构
"vetur.validation.template": false,
// vetur 默认的格式化配置项
"vetur.format.defaultFormatterOptions": {
  "prettier": {
    "trailingComma": "none",
    "semi": false,
    "singleQuote": true,
    "arrowParens": "avoid",
    "printWidth": 100
  },
  "js-beautify-html": {
    "wrap_attributes": false
  }
},
// ---------------------------------------
"[vue]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
  "editor.defaultFormatter": "vscode.html-language-features"
},
"[css]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.tabSize": 2,

Após a cópia, se houver itens de configuração duplicados, manter os itens de configuração originais ou excluí-los depende da configuração específica.

Configurar mais bonito

baixar arquivo de configuração

Baixe os seguintes arquivos:

Link do disco de rede Baidu: https://pan.baidu.com/s/1evelaVPEu0QWA9Rf1G_g-w 
Código de extração: lusj

Após a descompressão, obtenha .prettierrc.

colocar no local especificado

• Para o sistema Windows, coloque .prettierrco arquivo C:/Users/你的用户名na pasta (Users é o usuário).
• No sistema Mac, .prettierrco arquivo é um arquivo oculto, você precisa pressionar Command + Shift + .Mostrar arquivos ocultos, abrir o Finder, clicar em Ir na barra de menu superior , abrir a pasta pessoal (desenhar um pequeno ícone de casa) e .prettierrccopiá-la para a pasta pasta pessoal .

Modificar as configurações do vscode

Modifique o arquivo de configuração do vscode e modifique o caminho da primeira configuração na configuração

• O sistema Windows é modificado para"prettier.configPath": "C:\\Users\\LaoTang\\.prettierrc"
• O sistema Mac é modificado para"prettier.configPath": "~/.prettierrc"

Os exemplos são os seguintes:

Configurar o formatador padrão

Configure o formatador padrão para arquivos JS e arquivos VUE

Abra qualquer arquivo JS, botão direito do mouse, selecione "Formatar com...", no menu que aparece, selecione "Configurar formatador padrão", selecione "Prettier - Formatador de código"

Abra qualquer arquivo VUE, botão direito do mouse, selecione "Formatar com...", no menu que aparece, selecione "Configurar formatador padrão", selecione "Prettier - Formatador de código"

teste

Após esta configuração.

Quando escrevemos código, se o formato do código não atender aos requisitos do ESLint, um erro será exibido;

Quando salvamos o código, se houver código que não atenda aos requisitos do ESLint, o plug-in Prettier formatará automaticamente o código em um que atenda aos requisitos

Você mesmo pode testar.