Do not understand, their whole side from scratch, found that simple than imagined

The development environment

If you want to format for saving, under VScode, you need ESLint to work with this, see vscode-eslint for details

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}
Copy the code

One by one

To use ESLint + prettier in a VUE project, you need to incorporate several plugins

Eslint does what ESLint does vUE (react, et cetera) prettier does prettier in VUE

  1. Want to check.js
  • The installationeslint
  • npm install --save-dev eslint
  • configurationeslint, choose a recommended rule
// .eslintrc.js
{
  extends: ['eslint:recommended'],}Copy the code
  1. Want to check.vue
  • The installationeslint-plugin-vue, pay attention to the instructions in the document,vue3The official release is imminent, and the website documentation has been updatedvue3To use the way ingitIn looking forv6.*The version of the
  • npm install --save-dev eslint-plugin-vue
  • In the documentation, seeNote the configuration of the parser. The plug-in toparserSet up avue-eslint-parser, so do not configureparserField overrides, move any other parsers you need toparserOptions 去
// .eslintrc.js
{
  extends: ['eslint:recommended'.'plugin:vue/recommended'].// Parser: "vue-eslint-parser", // 'eslint-plugin-vue plugin:vue/recommended' plugin:vue/recommended 'is already set and can not be set
  parserOptions: {
    parser: "babel-eslint" // You can add 'babel-eslint' only if you use Flow or an experimental feature that is not supported by Eslint}}Copy the code
  1. toprettierThe format of
  • Install eslint – plugin – prettier
  • npm install --save-dev eslint-plugin-prettier
  • At this point aprettierIn the actual process, it must be found thateslint 与 prettierWhen there is a conflict between code styles, there is a configuration to deal with this conflict
  • You can find its recommendations in the documentationeslint-config-prettier. This configuration is used to handle conflicts between them
  • Install eslint – config – prettier
  • npm install --save-dev eslint-config-prettier
// .eslintrc.js
{
  extends: [
    "eslint:recommended"."plugin:vue/recommended"."plugin:prettier/recommended".Extends: ['prettier'], plugins: ['prettier']
    "prettier/vue",]}Copy the code

All the parts that are involved

// package.json { ... ", "devDependencies": {"eslint": "^7.0.0", "eslint-config-prettier": "^6.11.0", "eslint-plugin-prettier": "^ 3.1.3 eslint - plugin -", "vue" : "^ 6.2.2", "prettier" : "^ at 2.0.5"}}Copy the code
// .eslintrc.js
module.exports = {
  root: true.env: {
    node: true,},extends: [
    "eslint:recommended"."plugin:vue/recommended"."plugin:prettier/recommended"."prettier/vue",].rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off"."no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"."prettier/prettier": [
      "error",
      {
        endOfLine: "auto"],},"vue/html-self-closing": "error",}};Copy the code

Once understood, use the official scaffolding ^^

The official scaffolding is ready. “@vue/prettier”, which literally prettier. So after the CLI is generated, it’s done. However, MY priority is to choose the recommended one, so it will be a little different from the generated one

conclusion

There’s no need to go deep. Just figure out what this is all about. Come to think of it, if you read through the ESLint documentation carefully, you probably wouldn’t have these problems…

FAQ

Delete␍eslint(prettier/prettier)

For prettier, I decided to configure endOfLine “auto” for prettier

When HTML is formatted by Prettier, the tag looks strangehtml-whitespace-sensitivity

In the case of enclosed elements, whitespace is going to have an effect, and it’s going to be a bit of a formatting problem so by default, paragraph wrap is going to be a bit of a bug and it’s going to be a little bit of an analysis of what you’re going to use

<! -- --html-whitespace-sensitivity (defaults to css) css - Respect the default value of CSS display property. Strict-all whitespace is considered significant according to the default HTML tag CSS attribute. Ignore - All whitespace is considered insignificant. Code is beautiful, the page may produce Spaces -->
<! -- <span> is an inline element, <div> is a block element -->

<! -- input -->
<span class="dolorum atque aspernatur"
  >Est molestiae sunt facilis qui rem.</span
>
<div class="voluptatem architecto at">
  Architecto rerum architecto incidunt sint.
</div>

<! -- output -->
<span class="dolorum atque aspernatur"
  >Est molestiae sunt facilis qui rem.</span
>
<div class="voluptatem architecto at">
  Architecto rerum architecto incidunt sint.
</div>
Copy the code