eslint,prettier配置

ESlint与Prettier配置



什么是eslint

简单的说eslint就是代码检查工具, 用来检查你的代码是否符合指定的规范;使用它可以避免低级错误和统一代码的风格。如果每次在代码提交之前都进行一次eslint代码检查,就不会因为某个字段未定义为undefined或null这样的错误而导致服务崩溃,可以有效的控制项目代码的质量。


eslint配置

  1. 初始化一个express项目

mkdir eslint-test
cd eslint-test
npm init -y
npm i express
touch index.js

index.js内容如下

const express = require('express')
const app = express()

app.get('/', async (req, res) => {
   
	try {
   
		res.send('<h1>eslint init</h1>')
	} catch {
   }
})

app.listen(3000, () => {
   
	console.log('server run on port 3000')
})
  1. 安装eslint并初始化

npm i eslint --save-dev
npm init @eslint/config

  1. 选择eslint提供的功能

    3.1 选择检查语法, 发现问题,强制代码风格
    检查语法, 发现问题,强制代码风格
    3.2 项目以哪种模块类型,选择 CommonJs, 因为我们是使用的Node环境

  • 6
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: VSCode是一款流行的代码编辑器,可以通过安装插件来集成ESLintPrettierESLint是一款JavaScript代码检查工具,可以帮助开发者发现代码中的错误和潜在问题。Prettier是一款代码格式化工具,可以自动格式化代码,使其更易于阅读和维护。配置ESLintPrettier可以帮助开发者在编写代码时更加高效和准确。 ### 回答2: 近年来,前端工具生态系统飞快的发展,其中强化代码风格和静态代码质量的工具是越来越重要的,而比较流行和实用的两个工具是ESLintPrettier,它们都被广泛应用于JavaScript和TypeScript项目中。 VS Code是一款流行的编辑器,它与ESLintPrettier紧密集成,并允许我们在编辑器中对它们进行配置。这个配置可以让我们轻松地实现自动修复代码风格和语法错误,并确保格式一致性,从而提高代码质量和可读性。 首先,我们需要在项目中安装ESLintPrettier。我们可以在 package.json 中的 devDependencies 中添加以下两个依赖: ``` "eslint": "^7.31.0", "prettier": "^2.4.1" ``` 接下来,我们需要安装两个 VS Code 扩展程序进行配置: - ESLint扩展程序:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint - Prettier扩展程序:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode 当完成上述操作后,我们可以在 VS Code 中的设置中打开 ESLint 配置,通过以下方式启用 ESLint: ``` { "editor.formatOnSave": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ] } ``` 这个配置的意义是,当保存文件时,自动修复 ESLint 指出的错误和警告,同时,在实时代码检查时支持 JavaScript 和 TypeScript 语言和相关的文件扩展。 接下来,我们可以配置 Prettier 执行格式化操作。为了让 PrettierESLint 集成,我们可以添加一个 `.prettierrc` 文件到项目的根目录下: ``` { "singleQuote": true, "trailingComma": "all", "tabWidth": 2 } ``` 这里只配置了三个 Prettier 的选项,其余的选项可以根据具体需求进行更改。关于 Prettier 的具体选项,可以查看官方文档:https://prettier.io/docs/en/options.html 最后,在 VS Code 中的设置中,我们需要添加以下配置: ``` { "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } ``` 这个配置告诉 VS Code,在 JavaScript 和 TypeScript 语言的文件中,默认使用 Prettier 进行格式化。 综上所述,通过以上的配置,我们可以在 VS Code 中实现对 ESLintPrettier 的自动检测和代码格式化。这样,我们可以有效地提高代码的可读性、可维护性和质量,同时也能提高我们的开发效率和团队协作效率。 ### 回答3: VSCode是一款非常流行的代码编辑器,目前市场占有率已经超过了其他编辑器。同时,VSCode也支持各种插件和配置,可以帮助开发者更高效地编写代码。其中,ESLintPrettier是两款比较常见的插件,也是必不可少的。下面我们来讲一下如何在VSCode中配置ESLintPrettier。 1. 安装ESLintPrettier插件 首先,需要在VSCode的插件市场中搜索并安装ESLintPrettier插件。安装完成后,需要重新启动VSCode才能生效。 2. 配置ESLint 在VSCode中按下Ctrl+Shift+P,打开命令面板,然后输入“Open Workspace Settings”打开VSCode的设置。找到ESLint配置项,并进行配置。这里可以选择使用默认配置,也可以按自己需要进行定制化配置。 3. 配置Prettier 同样地,在命令面板中输入“Open Workspace Settings”打开VSCode的设置,找到Prettier配置项,并进行配置。这里同样可以选择默认配置或按自己需求进行配置。 4. 同步ESLintPrettier配置 配置完成后,需要同步ESLintPrettier配置,以确保代码的风格一致。需要安装一个名为“eslint-plugin-prettier”的插件,然后在.eslintrc文件中进行配置。 以上就是在VSCode中配置ESLintPrettier的方法。配置完成后,可以在代码编写过程中更加高效和规范

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值