这篇文章主要介绍“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 <space> to select, <a> to toggle all, <i> 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// 这样注释能忽略当前文件下面所有行的指定的错误，这里是忽略import/first错误单独忽略指定文件
需要在.eslintignore中添加文件，语法同.gitignore
TroubleShooting
Requires Promise-like values to be handled appropriately (no-floating-promises): Promise必须要能正确处理响应与异常，可以加上then和catch
(async () => { ...})() // 需要加上下面的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如何使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
