eslint + prettier + vscode

项目安装依赖

yarn add eslint@7.32.0 -D
yarn add babel-eslint@10.1.0 -D
yarn add eslint-plugin-prettier@4.0.0 -D
yarn add eslint-plugin-vue@7.17.0 -D
yarn add @vue/eslint-config-prettier@6.0.0 -D

vscode 配置代码格式化

首先项目先装上eslint，然后vscode 上装 eslint插件，prettier 插件，Vetur插件

vscode 中settings.json配置

{
  "editor.snippetSuggestions": "top", // 是否允许自定义的snippet片段提示
  // "files.autoSave": "onFocusChange",
  "editor.fontSize": 16, // 设置字体
  "editor.tabSize": 2, // 设置tab位2个空格，设置后在页面可查看.
  "editor.tabCompletion": "on", // 用来在出现推荐值时，按下Tab键是否自动填入最佳推荐值
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": false // 这个属性能够在保存时，自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列
  },
  "editor.lineNumbers": "on", // 设置代码行号
  "editor.formatOnSave": false, // 编辑器的保存格式化
  "workbench.iconTheme": "vscode-icons", // 选用vscode-icons图标主题
  "explorer.confirmDelete": false,
  // #让vue中的js按"prettier"格式进行格式化
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // #vue组件中html代码格式化样式
      "max_preserve_newlines": 1, // 最大连续保留换行符数
      "wrap_attributes": "auto", //也可以设置为“auto”，效果会不一样
      "wrap_line_length": 160,
      "end_with_newline": false,
      "semi": false,
      "singleQuote": true
    },
    "prettier": {
      "semi": false,
      "singleQuote": true,
      "editor.tabSize": 2,
      "endOfLine": "lf"
    },
    "prettyhtml": {
      "printWidth": 160,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  "[yaml]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "editor.autoIndent": "advanced"
  },
  "files.eol": "\n",
  "launch": {
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",

    "configurations": [{
        "name": "Launch",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/hello_world.js",
        },
    ]
},
"debug.javascript.breakOnConditionalError": true
}

在根目录下创建以下文件写入验证规则

prettier.config.js

/**
 * @author
 * @description prettier 配置
 */

module.exports = {
  printWidth: 160, // 一行的字符数，如果超过会进行换行，默认为80
  tabWidth: 2, // 一个tab代表几个空格数
  useTabs: false, // 启用tab缩进
  semi: false, // 行位是否使用分号，默认为true
  singleQuote: true, // 字符串是否使用单引号，默认为false，使用双引号
  trailingComma: 'es5', // 是否使用尾逗号，有三个可选值"<none|es5|all>"
  bracketSpacing: true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  endOfLine: 'lf',
  // quoteProps: 'as-needed',
  // jsxSingleQuote: false,
  // jsxBracketSameLine: false,
  // arrowParens: 'always', // 总是添加圆括号
  htmlWhitespaceSensitivity: 'ignore',
  // vueIndentScriptAndStyle: true,
  proseWrap: 'always', // always|never|preserve
  overrides: [
    {
      files: ['*.css', '*.less', '*.scss'],
      options: {
        singleQuote: false,
        trailingComma: 'none',
      },
    },
  ],
}

.eslintrc.js

/**
 * @author
 * @description .eslintrc.js
 * @description 让所有可能会与 prettier 规则存在冲突的 eslint rule，失效，并使用 prettier 的规则进行代码检查。
 * @description 相当于，用 prettier 的规则，覆盖掉 eslint:recommended 的部分规则。
 * @description 后面 prettier 格式化，也会根据这个规则来。因此，不会再有冲突。
 */
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/recommended', '@vue/prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/no-v-html': 'off',
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  overrides: [
    {
      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
      env: {
        jest: true,
      },
    },
  ],
}