• nuxt.js + eslint + prettier 规范代码格式


    第一步:

    插件安装: 

    npm i -D eslint-plugin-prettier
    

     eslint-plugin-prettier插件会调用prettier对你的代码风格进行检查,其原理是先使用prettier对你的代码进行格式化,然后与格式化之前的代码进行对比,如果过出现了不一致,这个地方就会被prettier进行标记。

    npm i -D eslint-config-prettier
    

     通过使用eslint-config-prettier配置,能够关闭一些不必要的或者是与prettier冲突的lint选项。这样我们就不会看到一些error同时出现两次。使用的时候需要确保,这个配置在extends的最后一项。

    第二步:

    配置 .eslintrc.js (cli时选择了eslint):

    module.exports = {
      root: true,
      env: {
        browser: true,
        node: true,
      },
      parserOptions: {
        parser: 'babel-eslint',
      },
      extends: [
        '@nuxtjs',
        'plugin:nuxt/recommended',
        'plugin:prettier/recommended',
        'prettier',
        'prettier/vue',
      ],
      plugins: ['prettier'],
      // add your custom rules here
      rules: {
        'nuxt/no-cjs-in-config': 'off',
        indent: ['error', 4], // 4个空格缩进
        /* 更多配置请戳 http://eslint.cn/docs/rules/ */
      },
    }

    第三步:

    配置 .prettierrc(在根目录下新建.prettierrc文件,在使用eslint规则时,本地编辑器的格式化代码会与eslint的规则冲突,这里自己配置一个.prettierrc格式化代码的文件,约束您的代码风格): 

    {
        "tabWidth": 4,
        // 使用tab缩进,默认false
        "useTabs": false,
        // 使用分号, 默认true
        "semi": false,
        // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
        "singleQuote": false,
        // 行尾逗号,默认none,可选 none|es5|all
        // es5 包括es5中的数组、对象
        // all 包括函数对象等所有可选
        "TrailingCooma": "all",
        // 对象中的空格 默认true
        // true: { foo: bar }
        // false: {foo: bar}
        "bracketSpacing": true,
        // JSX标签闭合位置 默认false
        // false: <div
        //          className=""
        //          style={{}}
        //       >
        // true: <div
        //          className=""
        //          style={{}} >
        "jsxBracketSameLine": false,
        // 箭头函数参数括号 默认avoid 可选 avoid| always
        // avoid 能省略括号的时候就省略 例如x => x
        // always 总是有括号
        "arrowParens": "avoid"
    }

    第四步:

    配置webpack: (在nuxt.config.js中的build里对webpack进行扩展配置):

    build: {
        extend(config, ctx) {
          // Run ESLint on save
          if (ctx.isDev && ctx.isClient) {
            config.module.rules.push({
              enforce: 'pre',
              test: /.(js|vue)$/,
              loader: 'eslint-loader',
              exclude: /(node_modules)/,
              options: {
                fix: true,
              },
            })
          }
        },
      },
    

    我们项目是在webpack中引入eslint-loader来启动eslint的,所以我们只要稍微修改webpack的配置,就能在启动webpack-dev-server的时候,每次保存代码同时自动对代码进行格式化。

    eslint-plugin-prettier插件会调用prettier对你的代码风格进行检查,其原理是先使用prettier对你的代码进行格式化,然后与格式化之前的代码进行对比,如果过出现了不一致,这个地方就会被prettier进行标记,最后eslint自动fix按照prettier的规范修复error代码。

  • 相关阅读:
    4.14打印特殊图案
    4.13十进制/二进制转换器
    4.12程序运行时间
    4.11 计算文件的大小
    4.10文件的读写
    4.9位运算
    CyclicBarrier
    tar 命令
    MySQL 常用函数介绍
    mysql 表转 java 实体 sql
  • 原文地址:https://www.cnblogs.com/maxiansheng/p/13502976.html
Copyright © 2020-2023  润新知