eslint 校验

Author: ygs-code

.eslintignore

@@ -18,6 +18,13 @@ webpack/**/*
 **/webpack
 **/webpack/**/*
 **/webpack/**/*
+
+
+@babel
+@babel/*
+@babel/**/*
+
+ 
 
 
 

.eslintrc.js

@@ -18,37 +18,30 @@ module.exports = {
     es6: true,
     mocha: true,
     browser: true,
-    es2021: true,
+    es2021: true
   },
-  plugins: [
-    'react',
-    'jsx-a11y',
-    'import',
-    '@babel',
-
-    //  'prettier'
-  ],
-  parser: '@babel/eslint-parser',
+  plugins: ["react", "jsx-a11y", "import", "@babel", "react-hooks", "prettier"],
+  parser: "@babel/eslint-parser",
   parserOptions: {
     requireConfigFile: false,
     // parser: "@babel/eslint-parser",
     ecmaVersion: 6,
-    sourceType: 'module',
+    sourceType: "module",
     ecmaFeatures: {
       jsx: true,
       modules: true,
-      experimentalObjectRestSpread: true,
+      experimentalObjectRestSpread: true
     },
   },
 
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
     // 'prettier',
-    'plugin:prettier/recommended',
+    "plugin:prettier/recommended"
   ],
 
-  settings: { react: { pragma: 'React', version: '15.6.1' } },
+  settings: { react: { pragma: "React", version: "15.6.1" } },
 
   // 这里可以进行自定义规则配置
   // key：规则代号
@@ -57,28 +50,53 @@ module.exports = {
   //   "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',
+    "@babel/object-curly-spacing": "off",
+    "prettier/prettier": 2,
+    "no-debugger": 0,
+    "react/prop-types": 0,
+    "no-prototype-builtins": 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'],
+    "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',
+    "@babel/new-cap": "warn",
+    "@babel/no-invalid-this": "warn",
+    "@babel/no-unused-expressions": "warn",
+    "@babel/semi": "warn",
+    // 禁止不必要的转义字符
+    "no-useless-escape": 1,
+    "react/jsx-uses-react": 2, // 屏蔽"React" is defined but never used错误
+    "comma-dangle": ["off"], // 不允许最后多余的逗号
+    "react-hooks/rules-of-hooks": "warn", // 检查Hook的规则
+    "max-params": ["warn", 8], // 方法最多8个参数
+    "react-hooks/exhaustive-deps": "warn", // 检查effect的依赖
+    "max-nested-callbacks": ["warn", 4], // 循环最多4层，超过4层警告
+    "brace-style": ["off", "1tbs"],
+    "react/no-string-refs": "warn", // string类型的refs报warn
+    "no-unreachable-loop": "off",
+    "eol-last": ["error", "always"], // 文件末尾需要多空一行
+    // 先off掉
+    "react-hooks/exhaustive-deps": "warn", // 检查effect的依赖
+    "react/no-children-prop": 1,
+    eqeqeq: 1,
+    // 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号，
+    // always-multiline：多行模式必须带逗号，单行模式不能带逗号
+    "comma-dangle": [1, "never"],
+    // 控制逗号前后的空格
+    "comma-spacing": [1, { before: false, after: true }],
+    // 控制逗号在行尾出现还是在行首出现
+    // http://eslint.org/docs/rules/comma-style
+    "comma-style": [1, "last"]
+    // 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号，
+    // always-multiline：多行模式必须带逗号，单行模式不能带逗号
   },
-}
+};

.prettierignore

@@ -4,3 +4,10 @@ coverage
 
 # Ignore all HTML files:
 *.html
+**/*.min.js
+**/*.min.css
+
+.idea/
+node_modules/
+dist/
+build/

.prettierrc.js

@@ -7,72 +7,74 @@
  * @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添加引号
+  // semi: false, // 不加分号
+  trailingComma: 'none', // 结尾处不加逗号
+  // htmlWhitespaceSensitivity: 'ignore', // 忽略'>'下落问题
+  // printWidth: 4, //单行长度
+  // tabWidth: 80, //缩进长度
+  // 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, // 超过最大值换行
+  // 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', //对引用代码进行格式化
+  // 'proseWrap': 'preserve', // 是否要换行
+  // 'vetur.format.defaultFormatter.js': 'prettier', // vetur 使用 prettier格式化代码
+  // 'printWidth': 30, // 超过最大值换行
 
-  //   'prettier.tabWidth': 2, // 缩进字节数
+  // 'tabWidth': 2, // 缩进字节数
 
-  //   'prettier.useTabs': false, // 缩进不使用tab，使用空格
+  // 'useTabs': false, // 缩进不使用tab，使用空格
 
-  //   'prettier.semi': false, // 句尾添加分号
+  // 'semi': false, // 句尾添加分号
 
-  //   'prettier.singleQuote': false, // 使用单引号代替双引号
+  // 'singleQuote': false, // 使用单引号代替双引号
 
-  //   'prettier.proseWrap': 'preserve', // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
+  // 'proseWrap': 'preserve', // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
 
-  //   'prettier.arrowParens': 'avoid', // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
+  // 'arrowParens': 'avoid', // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
 
-  //   'prettier.bracketSpacing': true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
+  // 'bracketSpacing': true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
 
-  //   'prettier.endOfLine': 'auto', // 结尾是 \n \r \n\r auto
+  // 'endOfLine': 'auto', // 结尾是 \n \r \n\r auto
 
-  //   'prettier.eslintIntegration': false, //不让prettier使用eslint的代码格式进行校验
+  // 'eslintIntegration': false, //不让prettier使用eslint的代码格式进行校验
 
-  //   'prettier.htmlWhitespaceSensitivity': 'ignore',
+  // 'htmlWhitespaceSensitivity': 'ignore',
 
-  //   'prettier.ignorePath': '.prettierignore', // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
+  // 'ignorePath': '.prettierignore', // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
 
-  //   'prettier.jsxBracketSameLine': false, // 在jsx中把'>' 单独放一行
+  // 'jsxBracketSameLine': false, // 在jsx中把'>' 单独放一行
 
-  //   'prettier.jsxSingleQuote': false, // 在jsx中使用单引号代替双引号
+  // 'jsxSingleQuote': false, // 在jsx中使用单引号代替双引号
 
-  //   'prettier.parser': 'babylon', // 格式化的解析器，默认是babylon
+  // 'parser': 'babylon', // 格式化的解析器，默认是babylon
 
-  //   'prettier.requireConfig': false, // Require a 'prettierconfig' to format prettier
+  // 'requireConfig': false, // Require a 'prettierconfig' to format prettier
 
-  //   'prettier.stylelintIntegration': false, //不让prettier使用stylelint的代码格式进行校验
+  // 'stylelintIntegration': false, //不让prettier使用stylelint的代码格式进行校验
 
-  //   'prettier.trailingComma': 'es5', // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
+  // 'trailingComma': 'es5', // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
 
-  //   'prettier.tslintIntegration': false, // 不让prettier使用tslint的代码格式进行校验
+  // 'tslintIntegration': false, // 不让prettier使用tslint的代码格式进行校验
+  // printWidth: 100, // 代码宽度建议不超过100字符
+  // tabWidth: 10, // tab缩进2个空格
+  // semi: false, // 末尾分号
+  // singleQuote: true, // 单引号
+  // jsxSingleQuote: true, // jsx中使用单引号
+  // trailingComma: 'es5', // 尾随逗号
+  // arrowParens: 'avoid', // 箭头函数仅在必要时使用()
+  // htmlWhitespaceSensitivity: 'css', // html空格敏感度
 }

bin/cmd.js

@@ -13,14 +13,14 @@ import moment from 'moment'
 export default class Cmd {
   text = ''
 
-  runNodeModule(moduleName, params, options) {
+  runNodeModule (moduleName, params, options) {
     if (os.type() == 'Windows_NT' && !moduleName.match(/\.cmd$/)) {
       moduleName += '.cmd'
     }
     return this.run(moduleName, params, options)
   }
 
-  run(command, params, options) {
+  run (command, params, options) {
     this.text = ''
     // options = Object.assign(options || {}, { cwd: this.cfg.cwd });
     return new Promise((resolve, reject) => {

bin/index.js

@@ -11,6 +11,7 @@ import path from 'path'
 import os from 'os'
 import { Worker } from 'worker_threads'
 import { copyFile, watchFile, readWriteFiles } from '../webpack/utils'
+import { compiler } from '../webpack'
 import { spawn, SpawnOptions } from 'child_process'
 import kill from 'kill-port' // 杀死端口包
 import { execute, iSportTake } from './cmd' // 杀死端口包
@@ -52,14 +53,14 @@ if (isEnvDevelopment && isSsr) {
   readWriteFiles({
     from: path.join(process.cwd(), '/server/**/*').replace(/\\/gi, '/'),
     to: path.join(process.cwd(), '/dist/server').replace(/\\/gi, '/'),
-    transform(content, absoluteFrom) {
+    transform (content, absoluteFrom) {
       let reg = /.jsx|.js$/g
       if (reg.test(absoluteFrom)) {
         return $ResolveAlias.alias(content.toString(), '')
       }
       return content
     },
-    async callback() {
+    async callback () {
       if (child && child.kill) {
         child.kill()
       }
@@ -81,9 +82,13 @@ if (isEnvDevelopment && isSsr) {
   })
 }
 
-// if (isEnvDevelopment && !isSsr) {
-//     execute(process.platform === 'win32' ? 'npm.cmd' : 'npm', [
-//         'run',
-//         'ssr:dev',
-//     ]);
-// }
+if (isEnvDevelopment && !isSsr) {
+  execute("cross-env target='client'  npx babel-node  -r  @babel/register    ./server/index.js   -r    dotenv/config   dotenv_config_path=.env.development",);
+}
+
+
+if (isEnvProduction && !isSsr) {
+  compiler()
+
+
+}

client/App/App.js

@@ -6,9 +6,9 @@
  * @FilePath: /react-loading-ssr/client/App/App.js
  * @Description:
  */
-import React, {Component} from "react";
+import React, { Component } from "react";
 import PropTypes from "prop-types";
-import {Provider} from "react-redux";
+import { Provider } from "react-redux";
 import Routers from "@/router";
 import "./App.less";
 import "@/assets/css/base.less";
@@ -25,7 +25,7 @@ const App = (props) => {
     d,
     e,
     f,
-    sadfasdfasdfsadfasdfasdfasdfasdfsdf,
+    sadfasdfasdfsadfasdfasdfasdfasdfsdf
   } = props;
   return (
     <Provider store={store}>

client/App/CreateApp.js

@@ -6,8 +6,8 @@
  * @FilePath: /react-loading-ssr/client/App/CreateApp.js
  * @Description:
  */
-import React, {Component} from "react";
-import Loadable, {Capture} from "@/component/Loadable";
+import React, { Component } from "react";
+import Loadable, { Capture } from "@/component/Loadable";
 import PropTypes from "prop-types";
 import App from "./App.js";
 import "./App.less";
@@ -16,11 +16,11 @@ let {
   NODE_ENV, // 环境参数
   WEB_ENV, // 环境参数
   target, // 环境参数
-  htmlWebpackPluginOptions = "",
+  htmlWebpackPluginOptions = ""
 } = process.env; // 环境参数
 
 const CreateApp = (props = {}) => {
-  const {modules = []} = props;
+  const { modules = [] } = props;
 
   return target === "ssr" ? (
     <Capture
@@ -36,6 +36,6 @@ const CreateApp = (props = {}) => {
 };
 
 CreateApp.propTypes = {
-  modules: PropTypes.object,
+  modules: PropTypes.object
 };
 export default CreateApp;