VSCode 下 Vue 项目的 ESlint 和 Prettier 配置

配置内容

单引号、末尾分号、关闭了“Rplace ..⏎ with”（有谁知道如何开启并统一格式化工具吗）。

VSCode 配置

"editor.rulers": [80, 120], // 缩进栏线
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.formatOnPaste": true,
"editor.formatOnSave": false,
"editor.renderWhitespace": "all", // 显示空格
"emmet.triggerExpansionOnTab": true,
"stylusSupremacy.insertColons": false, // 冒号
"stylusSupremacy.insertSemicolons": false, // 分号
"stylusSupremacy.insertBraces": true, // 大括号
"stylusSupremacy.insertNewLineBetweenSelectors": true, // 并列的选择器新加一行
"stylusSupremacy.insertNewLineAroundBlocks": false, // 样式块中间空行
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
    "wrap_line_length": 80,
    "wrap_attributes": "force" // [auto|force|force-aligned|force-expand-multiline]
  }
},

VSCode 插件

Vetur                     // ext install octref.vetur
ESLint                    // ext install dbaeumer.vscode-eslint
language-stylus           // ext install sysoev.language-stylus
Manta's Stylus Supremacy  // ext install thisismanta.stylus-supremacy
Prettier - Code formatter // ext install esbenp.prettier-vscode

package.json

// vue cli 3 已经有，不用安装
"devDependencies": {
  "eslint-plugin-prettier": "^3.1.1", // 用于 "prettier/prettier": "error",通常已安装
  "prettier": "^1.18.2",
}

.prettierrc

{
  "semi": true,
  "singleQuote": true
}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/prettier'],
  rules: {
    quotes: ['error', 'single'],
    semi: ['error', 'always'],
    'prettier/prettier': 'off', // 关闭 error: Rplace ....⏎ with ....(不想关但配置不了与格式化工具)
    // 'prettier/prettier': [
    //   'error',
    //   {
    //     htmlWhitespaceSensitivity: 'ignore', // <!--- 这个并不能解决“Rplace ....⏎ with”的问题
    //     semi: true,
    //     singleQuote: true
    //   }
    // ],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
};

— 完 —