eslint | 易学教程

Is it possible to ban a list of words with ESlint or anything else when pre-commit?

阅读更多关于 Is it possible to ban a list of words with ESlint or anything else when pre-commit?

问题 I am using husky to deal with the pre-commit thing. So here I want that the newly written program should not contain a list of words, like dangerouslySetInnerHTML , etc. I know there is a rule no-danger in eslint-plugin-react, but it only prevents that one word. How can I write a list of words in a file and use it as a filter? 回答1: So I finally solved this problem myself. The solution lies in taking advantage of git hook and the precommit , which is one of those. A good resource of achieving

React, ESLint: eslint-plugin-react-hooks shows incorrect “missing dependency”

阅读更多关于 React, ESLint: eslint-plugin-react-hooks shows incorrect “missing dependency”

问题 Assume you are using React and you are writing a custom hook useSomething that returns the identical same thing each time it is invoked for the same component. const something = useSomething() // useSomething() at time X === useSomething() at time Y If you now use this something value inside of a useEffect(() => ...) and you do not pass something as a dependency to the array of the second argument of useEffect then the linter will warn you: React Hook useEffect has a missing dependency:

ESLint: How can I restrict certain paths with “no-restricted-imports” but allow subpaths?

阅读更多关于 ESLint: How can I restrict certain paths with “no-restricted-imports” but allow subpaths?

问题 I am using Material-UI and I am switching all my imports from import { Button } from "@material-ui/core"; to import Button from "@material-ui/core/Button"; I wanted to add a lint rule to not allow direct imports from "@material-ui/core", but allow for any subfolders, eg "@material-ui/core/Button". I found a "no-restricted-imports" rule which is supposed to tackle it, but I can only restrict anything under "@material-ui/core", so "@material-ui/core/*" gets restricted as well. I tried several

ESLint: How can I restrict certain paths with “no-restricted-imports” but allow subpaths?

阅读更多关于 ESLint: How can I restrict certain paths with “no-restricted-imports” but allow subpaths?

Custom ESLint Import Rule for MaterialUI

阅读更多关于 Custom ESLint Import Rule for MaterialUI

问题 I have a project in React, using Material UI, and I am applying one of their suggested methods to reduce my bundle size. Basically, I need to install the babel-plugin-transform-imports package and update the way we import components: // Replace this (Option 1): import Button from "@material-ui/core/Button"; // Whith this (Option 2): import { Button } from "@material-ui/core"; Everything is working fine, however, I would like to prevent the "wrong" imports (Option 1) in the future. Is there a

ESLint 使用方法

阅读更多关于 ESLint 使用方法

一、全局安装 npm install -g eslint 二、生成配置文件　　在项目根目录执行init，生成.eslintrc文件。在init时，要求根目录存在package.json。当然也可以直接复制个现成的.eslintrc.js文件。 eslint --init 三、自定义配置项　　根据规则文档，编辑.eslintrc.js文件内容。 module.exports = { "env": { "node": true }, "rules": { // 强制使用一致的缩进 "indent": ["warn", "tab"], // 禁止空格和 tab 的混合缩进 "no-mixed-spaces-and-tabs":1, // 禁用 debugger "no-debugger": 1, // 禁止不必要的布尔转换 "no-extra-boolean-cast": 1, // 强制所有控制语句使用一致的括号风格 "curly": 1, // 禁止使用多个空格 "no-multi-spaces": 1, // 要求在函数标识符和其调用之间有空格 "func-call-spacing": 1, // 强制在函数括号内使用一致的换行 "function-paren-newline": ["warn", "never"], // 强制隐式返回的箭头函数体的位置 "implicit

Unable to resolve relative module paths when eslint run from sub-folder

阅读更多关于 Unable to resolve relative module paths when eslint run from sub-folder

问题 When I run eslint from the root folder of my repo everything runs fine, with no errors. But when I run from a subfolder I get a ton of import/no-unresolved that don't happen when I run from root: /reporoot/subfolder0/subfolder1/MyFile.js 11:8 error Unable to resolve path to module 'foo' import/no-unresolved 11:8 error Missing file extension for "foo" import/extensions 14:97 error Unable to resolve path to module 'foo' import/no-unresolved 14:97 error Missing file extension for "foo" import

Unable to resolve relative module paths when eslint run from sub-folder

阅读更多关于 Unable to resolve relative module paths when eslint run from sub-folder

Prop destructuring inside of react state

阅读更多关于 Prop destructuring inside of react state

问题 I've added airbnb config for eslint that encourages prop and state destructuring, I like it, but stumbled across one problem when I define state in my component class MyComponent extends Component { state = { animation: this.props.active ? 1 : 0 } I get an error [eslint] Must use destructuring props assignment (react/destructuring-assignment) I'm not sure how can I correctly destructure active out of props here? Usually const {active} = this.props works, but whenever I place it inside state

eslint - Optional chaining error with vscode

阅读更多关于 eslint - Optional chaining error with vscode

问题 I am seeing a a red underline when I'm using an optional chain, but the code runs fine as I am on node 14 Here's my setup: node 14.1.0 eslint "^6.8.0" .eslintrc.js module.exports = { "env": { "node": true }, "extends": [ "eslint:recommended", ], "parserOptions": { "sourceType": "module", "ecmaVersion": 2020 }, "rules": { }, } 回答1: You should use babel-eslint with your eslint config. This allows you to lint ALL valid Babel code with eslint. Currently eslint does not support all ES2020 features