eslint 校验

Author: 姚观寿

.eslintrc.js

@@ -2,70 +2,83 @@
  * @Date: 2022-05-09 11:13:39
  * @Author: Yao guan shou
  * @LastEditors: Yao guan shou
- * @LastEditTime: 2022-07-04 12:57:04
- * @FilePath: /webpack-cli/.eslintrc.js
+ * @LastEditTime: 2022-08-10 19:46:16
+ * @FilePath: /react-loading-ssr/.eslintrc.js
  * @Description:
  */
 //配置： https://eslint.bootcss.com/
 module.exports = {
-    root: true, // 当前项目使用这个配置文件, 不会往父级目录找.eslintrc.js文件
+  root: true, // 当前项目使用这个配置文件, 不会往父级目录找.eslintrc.js文件
 
-    env: {
-        // 指定eslint启动环境(node支持), browser: true也可以在浏览器设置
-        node: true,
-        commonjs: true,
-        amd: true,
-        es6: true,
-        mocha: true,
-        browser: true,
-        es2021: true,
-    },
-    plugins: ['react', 'jsx-a11y', 'import', '@babel'],
-    parser: '@babel/eslint-parser',
-    parserOptions: {
-        requireConfigFile: false,
-        // parser: "@babel/eslint-parser",
-        ecmaVersion: 6,
-        sourceType: 'module',
-        ecmaFeatures: {
-            jsx: true,
-            modules: true,
-            experimentalObjectRestSpread: true,
-        },
+  env: {
+    // 指定eslint启动环境(node支持), browser: true也可以在浏览器设置
+    node: true,
+    commonjs: true,
+    amd: true,
+    es6: true,
+    mocha: true,
+    browser: true,
+    es2021: true,
+  },
+  plugins: [
+    'react',
+    'jsx-a11y',
+    'import',
+    '@babel',
+
+    //  'prettier'
+  ],
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    requireConfigFile: false,
+    // parser: "@babel/eslint-parser",
+    ecmaVersion: 6,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+      modules: true,
+      experimentalObjectRestSpread: true,
     },
-    extends: ['eslint:recommended', 'plugin:react/recommended'],
+  },
 
-    settings: { react: { pragma: 'React', version: '15.6.1' } },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    // 'prettier',
+    'plugin:prettier/recommended',
+  ],
 
-    // 这里可以进行自定义规则配置
-    // key：规则代号
-    // value：具体的限定方式
-    //   "off" or 0 - 关闭规则
-    //   "warn" or 1 - 将规则视为一个警告（不会影响退出码）,只警告，不会退出程序
-    //   "error" or 2 - 将规则视为一个错误 (退出码为1)，报错并退出程序
-    rules: {
-        'no-debugger': 0,
-        'react/prop-types': 0,
-        'no-prototype-builtins': 0,
-        'comma-dangle': 0,
-        'react/jsx-uses-vars': 1,
-        'react/display-name': 1,
-        'no-unused-vars': 'warn',
-        'no-console': 'warn',
-        'no-unexpected-multiline': 'warn',
-        // // 自定义规则 - 其实上面集成后有很多内置的规则, 这里可以进行规则的一些修改
-        // 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 上线环境用打印就报警告, 开发环境关闭此规则
-        // 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // debugger可以终止代码执行
-        // 'no-multiple-empty-lines': 'off', // 不允许有连续多行空行(关闭规则)
-        // 'no-undef': 1, //不能有未定义的变量
-        eqeqeq: ['error', 'always'],
-        // 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
-        'no-undef': 'error',
-        // 'no-void': 2, //禁用void操作符
-        '@babel/new-cap': 'error',
-        '@babel/no-invalid-this': 'error',
-        '@babel/no-unused-expressions': 'error',
-        '@babel/object-curly-spacing': 'error',
-        '@babel/semi': 'error',
-    },
-};
+  settings: { react: { pragma: 'React', version: '15.6.1' } },
+
+  // 这里可以进行自定义规则配置
+  // key：规则代号
+  // value：具体的限定方式
+  //   "off" or 0 - 关闭规则
+  //   "warn" or 1 - 将规则视为一个警告（不会影响退出码）,只警告，不会退出程序
+  //   "error" or 2 - 将规则视为一个错误 (退出码为1)，报错并退出程序
+  rules: {
+    'no-debugger': 0,
+    'react/prop-types': 0,
+    'no-prototype-builtins': 0,
+    'comma-dangle': 0,
+    'react/jsx-uses-vars': 1,
+    'react/display-name': 1,
+    'no-unused-vars': 'warn',
+    'no-console': 'warn',
+    'no-unexpected-multiline': 'warn',
+    // // 自定义规则 - 其实上面集成后有很多内置的规则, 这里可以进行规则的一些修改
+    // 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 上线环境用打印就报警告, 开发环境关闭此规则
+    // 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // debugger可以终止代码执行
+    // 'no-multiple-empty-lines': 'off', // 不允许有连续多行空行(关闭规则)
+    // 'no-undef': 1, //不能有未定义的变量
+    eqeqeq: ['error', 'always'],
+    // 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
+    'no-undef': 'error',
+    // 'no-void': 2, //禁用void操作符
+    '@babel/new-cap': 'error',
+    '@babel/no-invalid-this': 'error',
+    '@babel/no-unused-expressions': 'error',
+    '@babel/object-curly-spacing': 'error',
+    '@babel/semi': 'error',
+  },
+}

.prettierignore

@@ -0,0 +1,6 @@
+# Ignore artifacts:
+build
+coverage
+
+# Ignore all HTML files:
+*.html

.prettierrc.js

@@ -0,0 +1,78 @@
+/*
+ * @Date: 2022-08-10 18:46:38
+ * @Author: Yao guan shou
+ * @LastEditors: Yao guan shou
+ * @LastEditTime: 2022-08-10 19:45:14
+ * @FilePath: /react-loading-ssr/.prettierrc.js
+ * @Description:
+ */
+module.exports = {
+  'prettier/prettier': [
+    'error',
+    {
+      singleQuote: true,
+      parser: 'flow',
+    },
+  ],
+  singleQuote: false, // 使用单引号
+  jsxSingleQuote: false, // jsx中使用单引号
+  //   semi: false, // 不加分号
+  //   trailingComma: 'none', // 结尾处不加逗号
+  //   htmlWhitespaceSensitivity: 'ignore', // 忽略'>'下落问题
+  //   printWidth: 1800, //单行长度
+  //   tabWidth: 1000, //缩进长度
+  //   useTabs: false, //使用空格代替tab缩进
+  //   semi: true, //句末使用分号
+  //   singleQuote: true, //使用单引号
+  //   quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
+
+  //   trailingComma: 'all', //多行时尽可能打印尾随逗号
+  //   bracketSpacing: true, //在对象前后添加空格
+  //   jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
+  //   arrowParens: 'always', //单参数箭头函数参数周围使用圆括号
+  //   requirePragma: false, //无需顶部注释即可格式化
+  //   insertPragma: false, //在已被preitter格式化的文件顶部加上标注
+  //   htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
+  //   vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
+  //   endOfLine: 'lf', //结束行形式
+  //   embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
+  //   'prettier.proseWrap': 'preserve', // 是否要换行
+  //   'vetur.format.defaultFormatter.js': 'prettier', // vetur 使用 prettier格式化代码
+  //   'prettier.printWidth': 30, // 超过最大值换行
+
+  //   'prettier.tabWidth': 2, // 缩进字节数
+
+  //   'prettier.useTabs': false, // 缩进不使用tab，使用空格
+
+  //   'prettier.semi': false, // 句尾添加分号
+
+  //   'prettier.singleQuote': false, // 使用单引号代替双引号
+
+  //   'prettier.proseWrap': 'preserve', // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
+
+  //   'prettier.arrowParens': 'avoid', // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
+
+  //   'prettier.bracketSpacing': true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
+
+  //   'prettier.endOfLine': 'auto', // 结尾是 \n \r \n\r auto
+
+  //   'prettier.eslintIntegration': false, //不让prettier使用eslint的代码格式进行校验
+
+  //   'prettier.htmlWhitespaceSensitivity': 'ignore',
+
+  //   'prettier.ignorePath': '.prettierignore', // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
+
+  //   'prettier.jsxBracketSameLine': false, // 在jsx中把'>' 单独放一行
+
+  //   'prettier.jsxSingleQuote': false, // 在jsx中使用单引号代替双引号
+
+  //   'prettier.parser': 'babylon', // 格式化的解析器，默认是babylon
+
+  //   'prettier.requireConfig': false, // Require a 'prettierconfig' to format prettier
+
+  //   'prettier.stylelintIntegration': false, //不让prettier使用stylelint的代码格式进行校验
+
+  //   'prettier.trailingComma': 'es5', // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
+
+  //   'prettier.tslintIntegration': false, // 不让prettier使用tslint的代码格式进行校验
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "workbench.settings.editor": "json",
+    "workbench.settings.openDefaultSettings": true,
+    "workbench.settings.useSplitJSON": true
+}

client/App/App.js

@@ -2,27 +2,36 @@
  * @Date: 2022-08-05 09:22:30
  * @Author: Yao guan shou
  * @LastEditors: Yao guan shou
- * @LastEditTime: 2022-08-05 12:04:15
+ * @LastEditTime: 2022-08-10 19:29:52
  * @FilePath: /react-loading-ssr/client/App/App.js
- * @Description: 
+ * @Description:
  */
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {Provider} from 'react-redux';
-import Routers from '@/router';
-import './App.less';
-import '@/assets/css/base.less';
-import 'bootstrap/dist/css/bootstrap.css';
-
-
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+import {Provider} from "react-redux";
+import Routers from "@/router";
+import "./App.less";
+import "@/assets/css/base.less";
+import "bootstrap/dist/css/bootstrap.css";
 
 const App = (props) => {
-    const {history, location, store} = props;
-    return (
-        <Provider store={store}>
-            <Routers history={history} location={location} />
-        </Provider>
-    );
+  const {
+    history,
+    location,
+    store,
+    a,
+    b,
+    c,
+    d,
+    e,
+    f,
+    sadfasdfasdfsadfasdfasdfasdfasdfsdf,
+  } = props;
+  return (
+    <Provider store={store}>
+      <Routers history={history} location={location} />
+    </Provider>
+  );
 };
 // App.propTypes = {
 //     location: PropTypes.string,

client/App/CreateApp.js

@@ -1,34 +1,41 @@
-import React, {Component} from 'react';
-import Loadable, {Capture} from  '@/component/Loadable';
-import PropTypes from 'prop-types';
-import App from './App.js';
-import './App.less';
+/*
+ * @Date: 2022-08-09 09:35:04
+ * @Author: Yao guan shou
+ * @LastEditors: Yao guan shou
+ * @LastEditTime: 2022-08-10 18:28:02
+ * @FilePath: /react-loading-ssr/client/App/CreateApp.js
+ * @Description:
+ */
+import React, {Component} from "react";
+import Loadable, {Capture} from "@/component/Loadable";
+import PropTypes from "prop-types";
+import App from "./App.js";
+import "./App.less";
 
 let {
-    NODE_ENV, // 环境参数
-    WEB_ENV, // 环境参数
-    target, // 环境参数
-    htmlWebpackPluginOptions = '',
+  NODE_ENV, // 环境参数
+  WEB_ENV, // 环境参数
+  target, // 环境参数
+  htmlWebpackPluginOptions = "",
 } = process.env; // 环境参数
 
-
 const CreateApp = (props = {}) => {
-    const {modules = []} = props;
+  const {modules = []} = props;
 
-    return target === 'ssr' ? (
-        <Capture
-            report={(moduleName) => {
-                return modules.push(moduleName);
-            }}
-        >
-            <App {...props} />
-        </Capture>
-    ) : (
-        <App {...props} />
-    );
+  return target === "ssr" ? (
+    <Capture
+      report={(moduleName) => {
+        return modules.push(moduleName);
+      }}
+    >
+      <App {...props} />
+    </Capture>
+  ) : (
+    <App {...props} />
+  );
 };
 
 CreateApp.propTypes = {
-    modules: PropTypes.object,
+  modules: PropTypes.object,
 };
 export default CreateApp;

client/App/index.js

@@ -1,3 +1,3 @@
-import CreateApp from './CreateApp';
+import CreateApp from "./CreateApp";
 
 export default CreateApp;