Recentemente, quando muitos amigos ao meu redor usam eslint e mais bonito para combinar, eles sempre encontram alguns erros inexplicáveis e eu não sei como combiná-los, então resumi as etapas da minha correspondência e as compartilhei. Se houver algo errado, por favor, deixe-me saber Por favor, sejam gentis, todos!
Este artigo configura várias funções para
1. Configure ctrl + s, função de salvamento automático
2. Duas maneiras de configurar o eslint
3. Duas maneiras de configurar mais bonito
4. Resolva o conflito entre eslint e mais bonito
1. Configure ctrl + s, função de salvamento automático
O primeiro é configurado nas configurações do vscode (o primeiro é recomendado)
1. Clique em Configurações do Vscode => Espaço de trabalho => Editor de texto
A segunda é configurar no plug-in de formatação que você usa
Por exemplo, se você usar o eslint para formatar o plug-in agora, poderá acessar a extensão do plug-in mais bonito para configurá-lo
2. Duas maneiras de configurar o eslint
O primeiro, o caminho do plug-in vscode, baixe diretamente o plug-in EsLint
A segunda é configurar a opção eslint ao criar o projeto
Dentre eles, se você não configurou o eslint ao criar o projeto, e deseja utilizá-lo no meio do projeto, pode reinstalar o pacote
Os dois comandos a seguir
Se você verificar apenas o arquivo js, instale apenas a primeira linha; se for um projeto Vue, instale todos
yarn add eslint --dev
yarn add eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-promise eslint-plugin-vue --devEm seguida, vamos falar sobre como configurar o eslint. Existem dois lugares para configurar
Artigos de plug-ins:
Configure diretamente as opções correspondentes na extensão do plug-in e há explicações em caracteres chineses, fáceis de entender
A segunda é criar um arquivo chamado .eslintrc.js no diretório raiz, que está no mesmo nível de src.
Basta criá-lo diretamente, o eslint lerá automaticamente este arquivo neste nível
Se você quiser ignorar alguns arquivos sem verificação eslint, você pode criar um arquivo .eslintignore, veja a figura abaixo para detalhes
3. Duas maneiras de configurar mais bonito
É o mesmo que eslint. Também é um plug-in e um pacote. O método de configuração também é o mesmo. Um está nas configurações de extensão do plug-in e o outro está no arquivo .prettierrc.js. Escolha uma das duas. É recomendável estar em .prettierrc.js. Como ambas as pastas entram em vigor, se for definida na extensão mais bonita, o pacote pode não ser lido, fazendo com que a configuração personalizada não funcione.
Isso é recomendado. Na verdade, existem muitas maneiras de configurar o Prettier, como
(1).prettierrc arquivo
(2) arquivo prettier.config.js
(3) Configure o atributo mais bonito em package.json
Basta escrever este aqui, é simples e fácil de usar, e não há necessidade de cavar um buraco para você!
4. Resolva o conflito entre eslint e mais bonito
Os três problemas mais comuns que encontrei aqui são:
1. O Prettier transformará as aspas simples em aspas duplas por padrão e, em seguida, o eslint verificará e relatará um erro
2. Um ponto e vírgula será adicionado após cada linha do código js e, em seguida, o eslint verificará e relatará um erro
3. Após o término da função, uma vírgula será adicionada e, em seguida, o eslint verificará e relatará um erro
Nesse caso, existem duas soluções: a primeira é alterar o eslint para alterar sua verificação para aspas duplas e suportar ponto e vírgula.
A segunda é alterar o mais bonito para torná-lo compatível com o método de verificação eslint
Não há dúvida de que escolhemos a segunda opção, afinal usamos o eslint para verificar, se você alterar todas as suas regras, sua verificação perderá o sentido!
código. Quando estiver pronto, basta criar uma pasta .prettier e copiá-la.
module.exports = {
printWidth: 100,
tabWidth: 2, // 超过最大值换行
semi: false, // 结尾不用分号
singleQuote: true, // 使用单引号
disableLanguages: ['vue'], // 不格式化vue文件，vue文件的格式化单独设置
htmlWhitespaceSensitivity: 'ignore',
trailingComma: 'none', // 函数后面不加逗号，如果不写这一个，在methods 最后一个函数也会加逗号，eslint会报错，多了一个逗号
}
Este é o fim do compartilhamento de hoje. Seria ótimo se eu pudesse ajudar a todos. Claro, este também é um processo de meu próprio aprendizado e acúmulo contínuos. Vamos trabalhar duro juntos! Lembre-se de curtir!
