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

这篇文章主要介绍“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如何使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！