js代码格式化工具eslint如何使用

2023-01-22 07:43| 来源: 网络整理| 查看: 265

js代码格式化工具eslint如何使用发布时间：2022-09-26 15:03:48 来源：亿速云阅读：134 作者：iii 栏目：开发技术

这篇文章主要介绍“js代码格式化工具eslint如何使用”，在日常操作中，相信很多人在js代码格式化工具eslint如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”js代码格式化工具eslint如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

安装与初始化

直接这样一起安装几个工具: npm install --save-dev husky lint-staged eslint

可以执行./node_modules/.bin/eslint --init对当前目录的项目进行eslint初始化，能够通过交互式的命令进行配置，完成后会在当前目录创建配置文件.eslintrc.js

? How would you like to use ESLint? … To check syntax only❯ To check syntax and find problems To check syntax, find problems, and enforce code style ? What type of modules does your project use? # 项目中使用什么类型的模块 ❯ JavaScript modules (import/export) # vue项目选这个 CommonJS (require/exports) None of these ? Which framework does your project use? # 项目中使用什么框架 ❯ React Vue.js None of these ? Does your project use TypeScript? › No / Yes # 项目是否使用TypeScript，如果是下面会提示是否安装typescript的eslint ? Where does your code run? … (Press to select, to toggle all, to invert selection) ✔ Browser ✔ Node ? What format do you want your config file to be in? … ❯ JavaScript YAML JSON@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest ? Would you like to install them now with npm? › No / Yes

在项目的package.json配置husky和lint-stage

{ "scripts": { "prepare": "husky install", // 如果是整个项目统一用，那么只需要这样即可 "lint-staged": "lint-staged" }, "lint-staged": { "src/**": [ // 可以以目录形式指定目标 "eslint --fix" ], "*.{js,vue}": [ // 也可以以文件后缀的形式指定目标 "eslint --fix" ] } }

如果有多个子目录需要不同的规则可以这样做

首先，package.json中的prepare script需要这样改。虽然不同子目录不同的规则，但是.git是一个，所以hook也只能有一个，可以在项目根目录创建和安装.husky"prepare": "husky install .husky", 然后，在pre-commit脚本中添加逻辑，进入不同的子目录运行不同的eslint程序 !/bin/sh . "$(dirname "$0")/_/husky.sh"cd frontendecho 'Check frontend code'if [ -f "node_modules/.bin/lint-staged" ]; then ./node_modules/.bin/lint-stagedelse lint-stagedficd ../backendecho 'Check Backend code'if [ -f "node_modules/.bin/lint-staged" ]; then ./node_modules/.bin/lint-stagedelse lint-stagedfi

执行npm prepare会在根目录创建.husky文件夹，并将hook应用到当前git仓库中

添加pre-commit hook，执行命令./node_modules/.bin/husky add .husky/pre-commit "npm run lint-staged" && git add .husky/pre-commit

如果想要修改执行命令可以修改.husky/pre-commit例如

!/bin/sh . "$(dirname "$0")/_/husky.sh"cd myDirecho 'Check My code'if [ -f "node_modules/.bin/lint-staged" ]; then ./node_modules/.bin/lint-stagedelse lint-stagedfi同一仓库多个目录配置

如果同一个仓库里面有多个目录需要配置单独的规则，那么需要在每个目录都是用eslint init一次，并在每个项目单独执行npm compare命令以安装husky到.git 的hook中并修改每个.husky/pre-commit进入正确的目录

eslint常用命令eslint file.js # 校验指定文件eslint --fix file.js # 校验并尝试修改指定文件eslint规则配置

全局配置

以下配置都是在.eslintrc.js中

module.exports = { "env": { // 想启用的环境，默认就行 "es2021": true, "node": true }, "extends": [ // 从指定的插件中继承规则 "eslint:recommended", // eslint:all表示使用eslint的所有规则，可参考http://eslint.cn/docs/rules/，"eslint:recommended"表示使用eslint所有规则里面打勾的规则，"standard"表示使用standard的规则(需要先npm install standard --save-dev)，参考https://standardjs.com/rules-zhcn.html#javascript-standard-style。除了standard，还有Airbnb风格，但我比较习惯standard "plugin:@typescript-eslint/recommended" // 如果是typescript需要添加这个插件 ], "extends": ["standard-with-typescript"], // 如果是standard with typescript，依赖直接执行 npm install --save-dev eslint-config-standard-with-typescript，npm { ... })() // 需要加上下面的then和catch才能避免错误提示，也是一种很好的编码习惯 .then(() => { console.log('Start Success') }) .catch(() => { console.log('Start Failed') })

Require statement not part of import statement. 引入包的方式不同，需要将包引入方式改为允许的方式，例如

将const path = require('path')改为import path = require('path')

ESLint: iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow them. Separately, loops should be avoided in favor of array iterations.(no-restricted-syntax): 这是Airbnb中的一条规则no-restricted-syntax会禁用一些新特性新语法，比如for await ... in，如果要禁用不建议在rules中整个禁用，直接在使用的地方加// eslint-disable-next-line no-restricted-syntax吧

lint-staged Node.js requirement to 12.13.0: 最新版本的lint-staged要求node版本>=12.13.0(21年的)，或者降级lint-staged

eslint.rc里面的excludes不起作用，tsc的时候仍然去检查了node_modules里面的东西: 尝试升级typescript到3.9.*及以上

Parameter ‘xxx’ implicitly has an ‘any’ type: 要求太严的话就修改tsconfig.json，将compilerOptions下的noImplicitAny设置为false

“parserOptions.project” has been set for @typescript-eslint/parser: 可以把.eslintrc.js文件加入.eslintignore中，或者把.eslintrc.js改成json后缀和格式，居然就可以了

no-plusplus: 禁止使用一元操作符++或--，是因为空白可能会改变源代码的语义，可以使用+=来代替

consistent-return: 原因是函数的返回值的类型不统一，可以自行修改一下

react camel case props: 在react中禁止非驼峰写法的props，如果实在改不了，可以给它重命名: {first_name: firstName, last_name: lastName}

使用git的UI客户端，例如sourcetree，没有触发husky/eslint：这个一般是由于sourcetree没有找到node导致，首先我们需要去sourcetree->Preference->Advanced->Always display full console output，打开后再次commit就会发现错误日志: Can't find npx in PATH: ...Skipping pre-commit hook，找不到node路径直接跳过了pre-commit hook。此时只需要将node路径加入环境变量即可。一般是由于我们使用的是nvm，我们只需要将nvm路径加入husky的环境变量即可：

vim ~/.huskyrc，这个文件就是用于加载这些环境变量的，注意这是home目录不是项目目录export NVM_DIR="$HOME/.nvm"[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"export PATH="/Users/haofly/.nvm/versions/node/v15.3.0/bin:$PATH" # 上面的配置还是不行那直接加到PATH吧

No files matching the pattern "" were found: 找不到符合条件的文件就找不到，非要抱个错出来，可以给eslint命令加上--no-error-on-unmatched-pattern

到此，关于“js代码格式化工具eslint如何使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！

推荐阅读： js代码如何使用 vue+ESLint 配置保存自动格式化代码

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

js eslint 上一篇新闻：js遍历json数组的代码怎么写下一篇新闻：es6的新特性有哪些及怎么使用猜你喜欢如何适配AndroidQ拍照和读取相册图片？ AndroidQ分区存储权限变更及适配的方法 vue如何实现点击按钮切换背景颜色的效果怎么解决Pytorch 自定义子Module .cuda() tensor失败问题 springboot中不能获取post请求参数如何解决？ Java 无符号右移与右移运算符是什么？ JVM系列String.intern的性能分析 python查看已安装模块的方法 Android10.0如何实现本地音乐播放？ Spring Framework常见面试题有哪些？

【本文地址】

公司简介

联系我们