前端工程化-代码规范

138 阅读2分钟

代码规范

eslint 配置

  • 安装依赖

    因为我这里的webstorm的版本为2021.1.3,为了后续编辑器添加eslint的检查,所以这里使用eslint@7版本

    npm i eslint@7 -D
    
  • 初始化 eslint

    eslint --init
    

    可以根据自己的需要进行选择。我这里是做一个命令号脚本,所以选择如下配置:

    ✔ How would you like to use ESLint? · problems
    ✔ What type of modules does your project use? · commonjs
    ✔ Which framework does your project use? · none
    ✔ Does your project use TypeScript? · No / Yes
    ✔ Where does your code run? · node
    ✔ What format do you want your config file to be in? · JavaScript
    

    生成的.eslintrc.js格式化后是如下

    module.exports = {
      env: {
        commonjs: true,
        es2021: true,
        node: true
      },
      extends: 'eslint:recommended',
      parserOptions: {
        ecmaVersion: 12
      },
      rules: {
      }
    }
    
  • 添加 eslintbabel 冲突的配置

    • 安装依赖

      npm i @babel/eslint-parser -D
      
    • 添加eslint解释器配置

      module.exports = {
        env: {
          commonjs: true,
          es2021: true,
          node: true
        },
        extends: 'eslint:recommended',
        parserOptions: {
      +   parser: '@babel/eslint-parser',
          ecmaVersion: 12
        },
        rules: {
        }
      }
      

      小插曲:

      1. 修改完 babelrc 的时候,需要重启 webstorm, 或者右键重新应用

      2. 使用 babel.config.js 的时候 会报错

        这里需要配置 requireConfigFile: false, 解释如下文:

        github.com/babel/babel… (Additional parser configuration 部分)

  • 编辑器添加eslint检查的配置

    这里可以根据自己使用的编辑器自行

通过解决这个问题找到 babel 与 eslint 的冲突解决关系:

Question: 项目中出现JS Class 中使用static声明属性 ESLint 报错的问题

参阅文章:segmentfault.com/q/101000004…

prettier 配置

  • 添加prettier依赖

    npm i prettier -D
    
  • 添加 prettier 的配置

    echo module.exports = {} > .prettierrc.js
    echo > .prettierignore
    

    两个文件分别回填入如下:

    .prettierrc.js // 具体可以根据自己需要配置

    module.exports = {
      printWidth: 120,
      singleQuote: true,
      trailingComma: 'none',
      semi: false,
      tabWidth: 2,
      useTabs: false,
      bracketSpacing: true,
      jsxBracketSameLine: false,
      arrowParens: 'avoid',
      proseWrap: 'preserve',
    }
    

    .prettierignore

    # Ignore artifacts:
    build
    coverage
    node_module
    ​
    # Ignore all HTML files:
    
  • 添加 prettier 与 eslint 冲突的配置

    • 安装依赖:

      npm i eslint-config-prettier eslint-plugin-prettier -D
      
    • .eslintrc.js修改配置

       module.exports = {
         env: {
           commonjs: true,
           es2021: true,
           node: true
         },
         // eslint-config-prettier 来关掉 (disable) 所有和 Prettier 冲突的 ESLint 的配置
      -  extends: 'eslint:recommended',
      +  extends: ['eslint:recommended', 'prettier'],
        // 启用 eslint-plugin-prettier ,将 prettier  rules 以插件的形式加入到 ESLint 里面
      +  plugins: ['prettier'],
         parserOptions: {
           parser: '@babel/eslint-parser',
           ecmaVersion: 12
         },
      -  rules: {}
      +  rules: {
      +    'prettier/prettier': 2 // prettier 冲突提示这里可以具体配置
      +  }
       }
      

      上述的配置可以简略为如下:

      module.exports = {
         env: {
           commonjs: true,
           es2021: true,
           node: true
         },
      -  extends: 'eslint:recommended',
      +  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
         parserOptions: {
           parser: '@babel/eslint-parser',
           ecmaVersion: 12
         },
         rules: {}
       }
      

      具体参阅:

      zhuanlan.zhihu.com/p/80574300

      具体配置参阅:

      blog.csdn.net/weixin_4507…^v9^pc_search_result_cache,157^v4^control&utm_term=eslint+%2B+prettier&spm=1018.2226.3001.4187