> 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 ```javascript // 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 ```javascript 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'