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 } }) } } }