Logo

菜单

发布于 2026-01-06 0 阅读
0

配置 EsLint 和 Prettier junto 与 VScode 配置：

在 VScode 上配置 EsLint 和 Prettier junto

配置：

EsLint是什么？

ESLint 是 javascript 中的“lintig”处理过程（也可对 ECMAScript 进行更正）
ESLint 是“limpiar”código javascript tanto 和 servidor (node.js) 中的主要部分 (node.js) 和 navegador

Bueno，ESLint es una herramienta de “linting”，por lo que te puede ayudar a：

  • Mostrarte errores de sintaxis。
  • 大多数错误都是在实践中不存在的。
  • Proveer sugerencias para mejorar tu codigo。
  • 请务必在设备内部保持一致或重新调整。

¿Que es Prettier?

它支持 HMTL、CSS、JavaScript、JSX、TypeScript、GraphQL 等格式。

您可以保证自动操作的一致性。 Para ello，analiza el código y lo re-escribe cada vez que se ejecuta。

¿Que es VScode?

这是多平台代码编辑器，完全免费为 Microsoft 提供服务

包括清理支持、Git 集成控制、语法恢复、代码智能最终化、代码碎片和重构。

它是个性化的，可以根据编辑器的主题、技术和偏好来使用。

配置：

需要配置的配置项，首先要创建我们的项目应用程序

# Inicializa un proyecto utilizando npm para instalar paquetes
npm init --yes
# ó
npm init -y
Enter fullscreen mode Exit fullscreen mode

安装 Eslint 和 Prettier 所需的依赖项

# --sabe-dev Guarda las dependencia en forma de desarrollo
npm install --save-dev eslint prettier eslint-config-prettier 
eslint-plugin-prettier
Enter fullscreen mode Exit fullscreen mode

EsLint

配置 esLint 的格式是创建配置文件的格式，可创建所需的配置文件或使用创建归档文件的命令来创建所需的文件：

# .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  rules: {
    'prettier/prettier': 'warn',
  },
};
Enter fullscreen mode Exit fullscreen mode

您可以使用 ESLint 来查看 Prettier 的执行结果。

使用 EsLint 预配置命令中的所有步骤

# Crea el archivo eslint
npx eslint --init
Enter fullscreen mode Exit fullscreen mode

大多数创建 EsLint 存档的小系列步骤：

使用 EsLint 进行初步选择，单独修改语法，解决问题或解决问题

Forzar estilo de codigo

选择使用的模块类型，如import使用require

eslint 中的模块

可以选择使用我们的项目的框架，如React、VueJs或Vanilla Javascript

eslint 框架

根据 TypeScript 进行选择或设置

TypeScript 与 ESLint

您可以选择环境类型或NodeJ 导航器环境中的新项目喷射环境

Entorno de web o nodejs

Y ahora unaparte un tanto importante。

Podemos utilizar una guía de estilo ya definida, inspeccionar nuestros archivos JavaScript, 等等

En este caso utilizaremos una 风格指南 ya definida

eslint 风格指南

Ahora puedes seleccionar que guía de estilo quieres utilizar en tu proyecto, siendo las mas popes, están muy bien construidas y con buenas configuraciones

笔记：

如果使用 React，建议使用 Airbnb

爱彼迎指南

选择使用新配置存档的格式。

我喜欢或喜欢 cada 项目，也可以使用JSON来实现其他格式功能

JSON 格式

获取所需的相关选项后，您将无法安装所需的依赖项以及配置之前的配置项，并且可以与解调器相关。

开发依赖项

最新的档案.eslintrc.json

更漂亮

可以配置 Prettier，在文档中推荐使用不同的格式，例如 JSON、YAML、TOML 和 JS，以便
使用 JSON 来进行配置

Entonces crearemos un archivo.prettierrc和dentro del archivo colocaremos las opciones que necesitamos en nuestro proyecto

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}
Enter fullscreen mode Exit fullscreen mode

如果您无法格式化特定的存档，请使用常规表达式来测试
Podemos 的存档，但请忽略存档和扩展的所有事项

包容性的数据库归档 puedes colocar ciertas opciones especasas

{
  "semi": false,
  "overrides": [
    {
      "files": "*.test.js",
      "options": {
        "semi": true,"tabWidth": 2
      }
    },
    {
      "files": ["*.html", "legacy/**/*.js"],
      "options": {
        "tabWidth": 4
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

您可以在新的配置档案中创建不同的配置，以实现最佳的效果，并在实践中获得更好的效果

Buenas practicas

脚本

与待办事项列表一起创建脚本，以自动执行“linteo”或简单地格式化我们的归档文件

Dentro de nuestro package.json vamos a la sección de scripts, tentremos uno llamado "test" que no utilizaremos por el momento, o si ya tienes mas script en tu proyecto, simplemente agrega una coma y puedes colocar estas 3 opciones que explicaremos cada una de sus funciones

脚本

  • Lint
    Ejecuta eslint para “lintear” 和 revisar la sintaxis de todos nuestros archivos en nuestro proyecto

  • 去除棉絮

    Ejecuta eslint con el flag —fix que hace que si encuentra un estilo que no se sigue una regla la cual causa unconflicto con eslint, la corrige

  • 格式

    Ejecuta Prettier para formatear todos nuestros archivos

Ahora 独奏 ejecuta npm nombreDelComando

npm run lint
npm run lint-fix
npm run format
Enter fullscreen mode Exit fullscreen mode

VS代码

使用 Visual Studio Code 或 VScode 的编辑器

使用 EsLint 和 Prettier 编辑器集成EsLint 和 Prettier编辑器，使用 Mismo 名称扩展：

ESLint 扩展

更漂亮

可能会出现安装错误，请点击安装按钮

安装后，需要配置 Visual Studio Code

按下快捷键ctrl + ，然后单击下图中的符号，即可单击并进入设置

调整

有了新的配置，您可以使用 JSON 格式的符号或图标来配置 VScode 的配置

VSCode 调整

您可以使用 Eslint 和 Prettier 扩展的基本功能进行基本配置，因为需要创建档案，因此可以使用推荐的项目来使用您的角色，以便进行自定义配置和自定义配置

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
 },
Enter fullscreen mode Exit fullscreen mode

También Podemos definir estilos en nuestra configuración para un lenguaje especialo：

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
},
"[python]": {
    "editor.tabSize": 4
},
Enter fullscreen mode Exit fullscreen mode

你可以在 vscode 中使用 eslint 和 prettier 进行集成：D

文章来源：https://dev.to/mrluisfer/configurar-eslint-prettier-junto-con-vscode-3h00
创造性思维者的七个共同特征
为什么开发者如此排斥上下文切换