nuxt + eslint + prettier 保存自动格式化(无需配置.vscode/settings.json)

透明技术人

nuxt + eslint + prettier 保存自动格式化(无需配置.vscode/settings.json)

  • 首先安装配置完(编码规范,代码提交规范)全家桶husky+lint-staged+commitlint,详细配置方式请戳 全家桶husky+lint-staged+commitlint ,然后开始以下配置完成保存时自动格式化

    1. 配置.editorconfig文件

    # editorconfig.org
    root = true
    [*]
    indent_size = 4 
    indent_style = space
    end_of_line = lf
    charset = utf-8
    trim_trailing_whitespace = true
    insert_final_newline = true
    [*.md]
    trim_trailing_whitespace = false

    2. 配置.prettierrc文件

    {
      "singleQuote": true, // 使用单引号 `.vscode/settings.json` 的`prettier.semi`
      "semi": false, // 结尾不加分号 `.vscode/settings.json` 的`prettier.semi`
      "printWidth": 120 // 此项为我自加以上两项为默认,表示每行最多显示的字符数,默认为80,本人觉得太短了,因此修改了一下,必须与`.vscode/settings.json` 的`prettier.printWidth`对应上
      /* 更多配置请转至 https://prettier.io/docs/en/options.html */
    }

    3. 配置.eslintrc.js文件

    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: ['off', 2], // 4个空格缩进
      /* 更多配置请戳 http://eslint.cn/docs/rules/ */
      },
    }

    4. nuxt.config.js文件下 build.extend(config, ctx) {}添加options.fix: true

    build: {
          /*
           ** You can extend webpack config here
           */
          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
                      }
                  })
              }
          }
      }
阅读 1.5k

web前端技术栈八面玲珑来汇总
超实用web前端项目代码段总结
189 声望
1 粉丝
0 条评论
189 声望
1 粉丝
文章目录
宣传栏