eslint规则-文字版
2021-07-15
5220 字约 18 分钟
...List of supported rules
规则列表
- react/boolean-prop-naming: Enforces consistent naming for boolean props 布尔属性的命名一致性 需要以is或has为前缀
- react/button-has-type: Forbid "button" element without an explicit "type" attribute 按钮元素需要明确的type属性
- react/default-props-match-prop-types: Prevent extraneous defaultProps on components 禁止组件上无关的默认属性
- react/destructuring-assignment: Rule enforces consistent usage of destructuring assignment in component 组件中强制要求结构赋值
- react/display-name: Prevent missing
displayNamein a React component definition 组件定义时需要定义组件名称 - react/forbid-component-props: Forbid certain props on Components 禁止组件中有十分明确的props属性
- react/forbid-dom-props: Forbid certain props on DOM Nodes //禁止在DOM节点上使用的props属性
- react/forbid-elements: Forbid certain elements 禁止使用某种元素组件
- react/forbid-prop-types: Forbid certain propTypes 禁止特定的propType
- react/forbid-foreign-prop-types: Forbid foreign propTypes //禁止外来的propType属性
- react/no-access-state-in-setstate: Prevent using this.state inside this.setState 禁止在setState中使用this.state
- react/no-array-index-key: Prevent using Array index in
keyprops 阻止使用Array的序号作为props 的key - react/no-children-prop: Prevent passing children as props 禁止使用props传递children
- react/no-danger: Prevent usage of dangerous JSX properties 禁止使用危险的JSX属性
- react/no-danger-with-children: Prevent problem with children and props.dangerouslySetInnerHTML 禁止同时使用children和dangerouslySetInnerHTML
- react/no-deprecated: Prevent usage of deprecated methods, including component lifecyle methods 禁止使用过时的方法,包括组件生命周期方法
- react/no-did-mount-set-state: Prevent usage of
setStateincomponentDidMount禁止在 componentDidMount方法中使用setState - react/no-did-update-set-state: Prevent usage of
setStateincomponentDidUpdate禁止在componentDidUpdate使用setState - react/no-direct-mutation-state: Prevent direct mutation of
this.state禁止this.state的状态突变 - react/no-find-dom-node: Prevent usage of
findDOMNode//禁止使用 "findDOMNode" - react/no-is-mounted: Prevent usage of
isMounted//禁止使用"isMounted" - react/no-multi-comp: Prevent multiple component definition per file 禁止每个文件中定义多个组件
- react/no-redundant-should-component-update: Prevent usage of
shouldComponentUpdatewhen extending React.PureComponent 当扩展React.PureComponent 时禁止使用"shouldComponentUpdate"生命周期函数 - react/no-render-return-value: Prevent usage of the return value of
React.render禁止使用"React.render"的返回值 - react/no-set-state: Prevent usage of
setState无状态组件中禁止使用setState - react/no-typos: Prevent common casing typos //确保没有声明静态类属性和生命周期方法的大小写错误
- react/no-string-refs: Prevent using string references in
refattribute. 禁止使用字符串 作为ref 属性的值 - react/no-this-in-sfc: Prevent using
thisin stateless functional components 无状态组件中禁止使用this - react/no-unescaped-entities: Prevent invalid characters from appearing in markup 防止标签中出现无效字符
- react/no-unknown-property: Prevent usage of unknown DOM property (fixable) 禁止使用未知的DOM属性
- react/no-unsafe: Prevent usage of unsafe lifecycle methods 禁止使用不安全的生命周期函数
- react/no-unused-prop-types: Prevent definitions of unused prop types 禁止定义未使用的propTypes的属性
- react/no-unused-state: Prevent definitions of unused state properties 禁止定义未使用的state属性
- react/no-will-update-set-state: Prevent usage of
setStateincomponentWillUpdate禁止在'componentWillUpdate'中使用setState - react/prefer-es6-class: Enforce ES5 or ES6 class for React Components 强制使用ES5 或ES6的类
- react/prefer-stateless-function: Enforce stateless React Components to be written as a pure function 精致无状态组件被写成纯净函数
- react/prop-types: Prevent missing props validation in a React component definition 防止在react组件定义中缺少props验证
- react/react-in-jsx-scope: Prevent missing
Reactwhen using JSX 防止在使用JSX是丢失React - react/require-default-props: Enforce a defaultProps definition for every prop that is not a required prop 为不是必需属性的每个属性强制默认属性定义
- react/require-optimization: Enforce React components to have a
shouldComponentUpdatemethod 强制 React 组件拥有shouldComponentUpdate 方法 - react/require-render-return: Enforce ES5 or ES6 class for returning value in render function 强制ES5或ES6类在render函数中有返回值
- react/self-closing-comp: Prevent extra closing tags for components without children (fixable) 防止没有孩子的组件有额外的闭标签
- react/sort-comp: Enforce component methods order (fixable) 强制组件方法顺序
- react/sort-prop-types: Enforce propTypes declarations alphabetical sorting 严格要求propTypes按照字母表的顺序排序
- react/style-prop-object: Enforce style prop value being an object 严格要求style属性值继承于object属性
- react/void-dom-elements-no-children: Prevent void DOM elements (e.g.
<img />,<br />) from receiving children 禁止空DOM元素接受子元素
JSX-specific rules
- react/jsx-boolean-value: Enforce boolean attributes notation in JSX (fixable) 强制布尔属性的记号
- react/jsx-child-element-spacing: Enforce or disallow spaces inside of curly braces in JSX attributes and expressions.
- react/jsx-closing-bracket-location: Validate closing bracket location in JSX (fixable)
- react/jsx-closing-tag-location: Validate closing tag location in JSX (fixable)验证闭标签的位置
- react/jsx-curly-spacing: Enforce or disallow spaces inside of curly braces in JSX attributes and expressions (fixable)花括弧内两边是否留空格
- react/jsx-equals-spacing: Enforce or disallow spaces around equal signs in JSX attributes (fixable)等号两边是否留空格
- react/jsx-filename-extension: Restrict file extensions that may contain JSX 限制文件扩展名
- react/jsx-first-prop-new-line: Enforce position of the first prop in JSX (fixable) 限制首个属性的位置
- react/jsx-handler-names: Enforce event handler naming conventions in JSX 限制事件处理命名习惯
- react/jsx-indent: Validate JSX indentation (fixable) 验证缩进
- react/jsx-indent-props: Validate props indentation in JSX (fixable) 验证属性缩进
- react/jsx-key: Validate JSX has key prop when in array or iterator 验证数组中或迭代器中的key属性
- react/jsx-max-depth: Validate JSX maximum depth 验证最大深度
- react/jsx-max-props-per-line: Limit maximum of props on a single line in JSX (fixable) 限制单行的最大属性数量
- react/jsx-no-bind: Prevent usage of
.bind()and arrow functions in JSX props 预防bind和箭头函数的使用 - react/jsx-no-comment-textnodes: Prevent comments from being inserted as text nodes 阻止文本节点中插入注释
- react/jsx-no-duplicate-props: Prevent duplicate props in JSX 避免重复属性
- react/jsx-no-literals: Prevent usage of unwrapped JSX strings 避免使用未包裹的字符串字面量
- react/jsx-no-target-blank: Prevent usage of unsafe
target='_blank'避免使用不安全的target=_blank属性 - react/jsx-no-undef: Disallow undeclared variables in JSX 不允许使用未声名的变量
- react/jsx-one-expression-per-line: Limit to one expression per line in JSX 限制单行的表达式数量
- react/jsx-curly-brace-presence: Enforce curly braces or disallow unnecessary curly braces in JSX 使用花括号或禁止非必要的花括号
- react/jsx-fragments: Enforce shorthand or standard form for React fragments 强制使用React fragments的缩写或标准样式
- react/jsx-pascal-case: Enforce PascalCase for user-defined JSX components 用户自定义的组件强制使用PascalCase命名法
- react/jsx-props-no-multi-spaces: Disallow multiple spaces between inline JSX props (fixable) 内联属性之间避免出现多个空格
- react/jsx-sort-default-props: Enforce default props alphabetical sorting 强制默认属性按字母顺序排序
- react/jsx-sort-props: Enforce props alphabetical sorting (fixable) 强制属性按字母顺序排序
- react/jsx-space-before-closing: Validate spacing before closing bracket in JSX (fixable) 验证比标签前面的空格
- react/jsx-tag-spacing: Validate whitespace in and around the JSX opening and closing brackets (fixable) 验证标签周围的空格
- react/jsx-uses-react: Prevent React to be incorrectly marked as unused 防止React被错误的标记为未使用
- react/jsx-uses-vars: Prevent variables used in JSX to be incorrectly marked as unused 防止使用中的变量错误的标记为未使用
- react/jsx-wrap-multilines: Prevent missing parentheses around multilines JSX (fixable) 多行JSX需要使用圆括号扩起来
如果您觉得这篇文章有帮助,请点个赞吧~
相关文章
更多文章 →前端规范2024-12-04
Husky(husky9.x版本适配) + Lint-staged + Commitlint + Commitizen
Husky Husky 是 钩子工具,可以设置在 git 各个阶段(pre commit、commit msg 等)触发。 官方网站: Husky 安装方式: 安装命令: 自动生成的 目录和指令: Lint staged lint staged 是一个在 git add 到暂存区的文件运行 linters (ESLint/Prettier/StyleLint) 的工具,避免在 git commit 提交时在整个项目执行。 可以让你当前的...
学习
前端规范2024-09-11
✨ feat: 自动给git提交添加emoji 无需手动输入
很多人都用过 ,或者类似的工具,但这些工具都需要靠手动书写、命令行工具、vscode插件来添加emoji,不太方便,本身emoji意义不大只是锦上添花的东西, 本文通过几行简单的自定义脚本来自动添加emoji , 锦上添花的同时没有任何额外负担 不用手动输入 ,根据type自动添加,也可以根据type scope组合 支持用任何工具提交 命令行 GUI图形化 自定义emoji映射 feat(core): 🥇 feat(ui): 🥈...
学习
前端规范2024-09-10
从HTML活动页面到 Vue、React 大型项目都通用的 git hooks 配置
git提交时不加审核,团队内的git规范很容易被一次次的样式拉扯修改、小bug调整等git提交给冲得稀烂。这时候可以使用 git 原生的 hooks,在 commit 之前监听一下 commit 内容。但是原生 git hooks 的配置默认是不同步到仓库的,这样一来,配置好的 hooks 事件其实就是本地单机事件,无法很好的团队共享。而 + 刚好能处理这个场景。 Husky Husky 是一个 Git Hook 工具,它允许开发者在...
学习
前端规范2023-07-06
nextjs项目配置eslint+prettier
一、安装 \+ prettier + eslint plugin prettier 二、配置.eslintrc.json 三、配置.prettiterrc.js
学习
前端规范2023-04-17
declare module '*.module.less' {
declare module ' .module.less' { const classes: { readonly \[key: string\]: string }; export default classes; }
前端规范2023-04-08
husky 与 lint-staged安装与配置
一、husky 注:本文引入的 husky 都是 8.0.0 以上的版本,老版本的使用可能与下文描述的不一致! 1\. husky 是什么? husky 的 开篇是这么描述的: Modern native Git hooks made easy (轻松创建现代化的原生 git hooks) Husky improves your commits and more 🐶 woof! 最重要的就是:它可以在项目中植入你设定的 git hoo...
评论
请登录后发表评论
去登录