wander-pretty

##### 📚brief view 写这个项目的初衷，是因为最近接手了一个3w+样式错误(eslint airbnb)的项目，因为之后会花时间去维护这个项目，那如果不解决这些问题，以后岂不是很惨。并且现在也有好几人在维护，也需要统一代码风格。因此，用这个项目装到`devD ependencies`中，然后跑一遍`pretty`，既对代码做了格式化(`.prettierrc`)，也做了代码检测(.eslintrc)，最后还输出了哪些遗留问题(无法被`eslint --fix`解决掉的)，接下来维护起来应该方便很多了吧😊 > 如果您有更好的解决【老旧工程】样式统一、风格一致性问题的方式，希望您告诉我，一起学习学习 ##### 🍰prettier > 快速格式化你的代码，终结各种写法之争目前来看，在`react`开发中大多使用prettier默认设置就行了，喜欢js中用单引号的，自行修改singleQuote就行了。 ##### 👿eslint > 代码检测，让问题代码无处遁形人工做代码检测是很累的，大部分程式化的工作就交给机器来做就行了。 ##### 😄use * 另起工程来做 1. `clone`到本地 2. 把旧工程的`eslint`和`prettier`规则迁移到当前。如旧工程没有的，可以在本目录配置好这两个插件 3. 执行`node index --help`(可以查看参数) 4. 执行`node index`使用默认参数运行 * 安装到`devDependencies`使用命令行 1. `npm install wander-pretty --save-dev` 2. 在项目根目录 3. `pretty --help`查看参数 4. `pretty`使用默认参数执行 ##### 🍎benefit * 自动给全部`js`应用`.prettier`的样式 * 输出一个报错的`eslint`文件，供你选择 ##### 📃exhibition 1. 原始文件目录 ![image-20190910203508185](./readme.assets/image-20190910203508185.png) 2. 样式奇怪的原始文件 ![](./readme.assets/38.png) 3. 输出文件目录 ![](./readme.assets/50.png) 4. 样式漂亮的输出文件 ![image-20190910203945684](./readme.assets/image-20190910203945684.png) 5. 告诉你哪些eslint没有被解决掉.默认为根目录下的`.pretty.error-eslint.json` ```json { "no-undef": [ { "filePath": "Desktop/projects/mine/pretty-test/src/components/TestComponent.js", "column": 45 }, { "filePath": "Desktop/projects/mine/pretty-test/src/components/TestComponent.js", "column": 31 }, { "filePath": "Desktop/projects/mine/pretty-test/src/index.js", "column": 45 }, { "filePath": "Desktop/projects/mine/pretty-test/src/index.js", "column": 31 } ], "constructor-super": [ { "filePath": "Desktop/projects/mine/pretty-test/src/components/TestComponent.js", "column": 3 }, { "filePath": "Desktop/projects/mine/pretty-test/src/index.js", "column": 3 } ], "no-empty-function": [ { "filePath": "Desktop/projects/mine/pretty-test/src/components/TestComponent.js", "column": 17 }, { "filePath": "Desktop/projects/mine/pretty-test/src/index.js", "column": 17 } ], "react/sort-comp": [ { "filePath": "Desktop/projects/mine/pretty-test/src/components/TestComponent.js", "column": 3 }, { "filePath": "Desktop/projects/mine/pretty-test/src/index.js", "column": 3 } ], "class-methods-use-this": [ { "filePath": "Desktop/projects/mine/pretty-test/src/components/TestComponent.js", "column": 13 }, { "filePath": "Desktop/projects/mine/pretty-test/src/components/TestComponent.js", "column": 14 }, { "filePath": "Desktop/projects/mine/pretty-test/src/index.js", "column": 13 }, { "filePath": "Desktop/projects/mine/pretty-test/src/index.js", "column": 14 } ], "no-unused-vars": [ { "filePath": "Desktop/projects/mine/pretty-test/src/components/TestComponent.js", "column": 14 }, { "filePath": "Desktop/projects/mine/pretty-test/src/components/TestComponent.js", "column": 15 }, { "filePath": "Desktop/projects/mine/pretty-test/src/index.js", "column": 14 }, { "filePath": "Desktop/projects/mine/pretty-test/src/index.js", "column": 15 } ], "no-console": [ { "filePath": "Desktop/projects/mine/pretty-test/src/components/TestComponent.js", "column": 19 }, { "filePath": "Desktop/projects/mine/pretty-test/src/components/TestComponent.js", "column": 20 }, { "filePath": "Desktop/projects/mine/pretty-test/src/index.js", "column": 19 }, { "filePath": "Desktop/projects/mine/pretty-test/src/index.js", "column": 20 }, { "filePath": "Desktop/projects/mine/pretty-test/src/utils/index.js", "column": 3 }, { "filePath": "Desktop/projects/mine/pretty-test/src/utils/index.js", "column": 19 } ], "react/state-in-constructor": [ { "filePath": "Desktop/projects/mine/pretty-test/src/components/TestComponent.js", "column": 3 }, { "filePath": "Desktop/projects/mine/pretty-test/src/index.js", "column": 3 } ], "react/no-unused-state": [ { "filePath": "Desktop/projects/mine/pretty-test/src/components/TestComponent.js", "column": 5 }, { "filePath": "Desktop/projects/mine/pretty-test/src/index.js", "column": 5 } ] } ``` ##### 👨‍🎓linter-learner 学习使用lint ```json { // import语句排序 "sort-imports": 0, // 驼峰命名变量 "camelcase": 0, // 未定义变量 "no-undef": 0, // --自减号 "no-plusplus": 0, // 下划线使用 "no-underscore-dangle": 0, // 强制使用===号 "react/jsx-props-no-spreading": 0, "eqeqeq": 0, // 函数参数重新赋值 "no-param-reassign": 0, // return语句不能赋值 "no-return-assign": 0, // 外部已定义变量名 "no-shadow": 0, // 未使用的变量 "no-unused-vars": 0, // 未命名函数 "func-names": 0, // react的state应该在constructor内声明 "react/state-in-constructor": 0, // react的state\props应该用解构获取值 "react/destructuring-assignment": 0, // 未使用到的表达式 "no-unused-expressions": 0, // 使用array的index作为keys "react/no-array-index-key": 0, // a 标签提供一个herf地址，键位可达 "jsx-a11y/anchor-is-valid": 0, // img标签需要一个alt属性或者文字 "jsx-a11y/alt-text": 0, // 非必填数据必须带有默认值 "react/require-default-props": 0, // 数组中禁止出现空的逗号 "no-sparse-arrays": 0, // 默认属性应该定义在class之外 "react/static-property-placement": 0, // 没有用到this的方法应该定义为static方法 "class-methods-use-this": 0, // class内部方法按字典排序 "react/sort-comp": 0, // children有可能只有一个危险的children "react/no-danger-with-children": 0, // 一行最长100个字符 "max-len": 0, // for-in 语句应该过滤不需要的属性 "guard-for-in": 0, // 不应该定义空对象参数 "no-empty-pattern": 0, // 可见的非交互性元素有click事件时需要至少一个键位事件 "jsx-a11y/click-events-have-key-events": 0, // 逗号后面加空格 "comma-spacing": 0, // 不要用new String() "no-new-wrappers": 0, // 一个文件只需要一个class "max-classes-per-file": 0, // 不要使用ReactDom.findDOMNode "react/no-find-dom-node": 0, // 不要使用this.refs | 字符串 "react/no-string-refs": 0, // 未重新赋值的变量应该声明为const "prefer-const": 0, // 使用上一次状态时应该在setState中用callback "react/no-access-state-in-setstate": 0, // import语句应该排序 "import/order": 0, // iframe需要一个独立的title属性 "jsx-a11y/iframe-has-title": 0, // 没有用到的state属性 "react/no-unused-state": 0, // props没有用到 "react/no-unused-prop-types": 0, // 不要使用new产生副作用 "no-new": 0, // 应该用解构 "prefer-destructuring": 0, // 禁用部分全局变量 "no-restricted-globals": 0, // 不要有空的block "no-empty": 0, // Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener "react/jsx-no-target-blank": 0, // jsx {前不应有新行 "react/jsx-curly-newline": 0, // 箭头函数应该返回值 "array-callback-return": 0, // 重复定义class成员函数 "no-dupe-class-members": 0, // 单独的块级作用域{} "no-lone-blocks": 0, // `'` can be escaped with `'`, `‘`, `'`, `’` "react/no-unescaped-entities": 0, // default返回 "default-case": 0, // Caution: `IssueUpgradeStateEnum` also has a named export `KEYMAP`. Check if you meant to write `import {KEYMAP} from '../../constants/IssueUpgradeStateEnum'` instead "import/no-named-as-default-member": 0, // Function declared in a loop contains unsafe references to variable(s) 'file' no-loop-func "no-loop-func": 0, // 禁用不必要的转义 "no-useless-escape": 0, // jsx缩进 "react/jsx-indent": 0 } ```