eslint 与 prettier配合, 保存时自动格式化代码

安装

1. 安装所需要的npm包

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-eslint @vue/eslint-config-prettier @vue/eslint-config-typescript eslint eslint-plugin-prettier eslint-plugin-vue

2. 安装vscode Prettier - Code formatter 插件
   

配置

1.创建.eslintrc.js

// dasd
module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    node: true
  },
  globals: {},
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    // 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-inferrable-types': 'off',
    '@typescript-eslint/no-unused-vars': 'off',
    '@typescript-eslint/no-empty-interface': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-empty-function': 0,
    '@typescript-eslint/ban-ts-ignore': 0,
    quotes: [1, 'single'],
    curly: [2, 'multi-line'],
    'no-undef': 0,
    '@typescript-eslint/no-this-alias': 0,
    'no-console': 0,
    'no-sparse-arrays': 0
  }
}

2.创建.prettierrc.js

module.exports = {
  printWidth: 80, //一行的字符数，如果超过会进行换行，默认为80,
  tabWidth: 2, //一个tab代表几个空格数
  useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  singleQuote: true, //字符串是否使用单引号，默认为false，使用双引号
  semi: false, // 行位是否使用分号，默认为true
  trailingComma: 'none', //是否使用尾逗号，有三个可选值"<none|es5|all>"
  bracketSpacing: true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  endOfLine: 'lf',
  jsxSingleQuote: true,
  jsxBracketSameLine: false // 在jsx中把'>' 是否单独放一行
}

3.配置 vscode setting.json

{
  // 保存时格式化文档
  "editor.formatOnSave": false,

  // eslint
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript", //  用eslint的规则检测js文件
    {
      "language": "vue", // 检测vue文件
      "autoFix": false //  为vue文件开启保存自动修复的功能
    },
    {
      "language": "html",
      "autoFix": true
    }
  ]
}

遇到问题

原因:

//.prettierc.js
{
	endOfLine: 'lf',
}

解决方案:

1. 通过编辑器将编辑器结束行改为LF,如下图.
   
2. 将endOfLine: 'auto'