vue2项目格式化 eslint+prettier

安装插件 ESLint    Prettier - Code formatter    Vetur

安装依赖 npm i @vue/cli-plugin-eslint @vue/eslint-config-prettier babel-eslint eslint eslint-plugin-prettier eslint-plugin-vue prettie --save-dev

终端跑指令 npx eslint --init

修改根目录下.eslintrc.js文件如下：

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "plugin:vue/essential",
        "eslint:recommended",
        "@vue/prettier"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "prettier"
    ],
    "rules": {
			quotes: [//强制使用单引号
				"error",
				"single"
			],
			semi: [//强制去除分号
				"error",
				"never"
			],
			"no-unused-vars":"off", //取消禁止未使用的变量规则
		  "handle-callback-err": [
		  	"error",
		  	"err"
		  ],
		  "lines-between-class-members": [
		  	"error",
		  	"never"
		  ],
		  "multiline-ternary": [
		  	"off"
		  ],
		  "no-async-promise-executor": [
		  	"off"
		  ],
		  "no-console": [
		  	"off"
		  ],
		  "no-extend-native": [
		  	"off"
		  ],
		  "no-new": [
		  	"off"
		  ],
		  "no-proto": [
		  	"off"
		  ],
		  "no-return-assign": [
		  	"off"
		  ],
		  "no-sequences": [
		  	"off"
		  ],
		  "no-tabs": [  
		  	"off"
		  ],
		  "no-unreachable": [
		  	"off"
		  ],
		  "no-useless-constructor": [
		  	"off"
		  ],
		  "object-curly-spacing": [
		  	"error",
		  	"always"
		  ],
		  "space-before-function-paren": [
		  	"error",
		  	"never"
		  ],
			"vue/multi-word-component-names": ["error", {
				"ignores": ["Three"]
			}]
    }
}

在根目录下创建.prettierrc文件如下：

{
  "singleQuote": true,
  "semi": false,
  "prettier.eslintIntegration": true,
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore"
}

vscode编辑器settings.json配置如下：

{
  "workbench.iconTheme": "vscode-icons",// 安装插件vscode-icons
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      // 格式化不加分号
      "semi": false,
      // 格式化为单引号
      "singleQuote": true
    }
  },
  // 在方法括号之间插入空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "editor.acceptSuggestionOnCommitCharacter": false,
  "javascript.format.insertSpaceAfterSemicolonInForStatements": false,
  "editor.formatOnSave": false,
  "prettier.semi": false,
  "prettier.singleQuote": true,
}