diff --git a/.eslintrc.js b/.eslintrc.js index 9ad58a4..24d7539 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -3,13 +3,190 @@ module.exports = { env: { node: true }, - extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"], + extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'], parserOptions: { - parser: "babel-eslint" + parser: 'babel-eslint' }, rules: { - "no-console": process.env.NODE_ENV === "production" ? "error" : "off", - "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", - + "vue/max-attributes-per-line": [2, { + "singleline": 10, + "multiline": { + "max": 1, + "allowFirstLine": false + } + }], + "vue/singleline-html-element-content-newline": "off", + "vue/multiline-html-element-content-newline":"off", + "vue/name-property-casing": ["error", "PascalCase"], + "vue/no-v-html": "off", + 'accessor-pairs': 2, + 'arrow-spacing': [2, { + 'before': true, + 'after': true + }], + 'block-spacing': [2, 'always'], + 'brace-style': [2, '1tbs', { + 'allowSingleLine': true + }], + 'camelcase': [0, { + 'properties': 'always' + }], + 'comma-dangle': [2, 'never'], + 'comma-spacing': [2, { + 'before': false, + 'after': true + }], + 'comma-style': [2, 'last'], + 'constructor-super': 2, + 'curly': [2, 'multi-line'], + 'dot-location': [2, 'property'], + 'eol-last': 2, + 'eqeqeq': ["error", "always", {"null": "ignore"}], + 'generator-star-spacing': [2, { + 'before': true, + 'after': true + }], + 'handle-callback-err': [2, '^(err|error)$'], + 'indent': [2, 2, { + 'SwitchCase': 1 + }], + 'jsx-quotes': [2, 'prefer-single'], + 'key-spacing': [2, { + 'beforeColon': false, + 'afterColon': true + }], + 'keyword-spacing': [2, { + 'before': true, + 'after': true + }], + 'new-cap': [2, { + 'newIsCap': true, + 'capIsNew': false + }], + 'new-parens': 2, + 'no-array-constructor': 2, + 'no-caller': 2, + 'no-console': 'off', + 'no-class-assign': 2, + 'no-cond-assign': 2, + 'no-const-assign': 2, + 'no-control-regex': 0, + 'no-delete-var': 2, + 'no-dupe-args': 2, + 'no-dupe-class-members': 2, + 'no-dupe-keys': 2, + 'no-duplicate-case': 2, + 'no-empty-character-class': 2, + 'no-empty-pattern': 2, + 'no-eval': 2, + 'no-ex-assign': 2, + 'no-extend-native': 2, + 'no-extra-bind': 2, + 'no-extra-boolean-cast': 2, + 'no-extra-parens': [2, 'functions'], + 'no-fallthrough': 2, + 'no-floating-decimal': 2, + 'no-func-assign': 2, + 'no-implied-eval': 2, + 'no-inner-declarations': [2, 'functions'], + 'no-invalid-regexp': 2, + 'no-irregular-whitespace': 2, + 'no-iterator': 2, + 'no-label-var': 2, + 'no-labels': [2, { + 'allowLoop': false, + 'allowSwitch': false + }], + 'no-lone-blocks': 2, + 'no-mixed-spaces-and-tabs': 2, + 'no-multi-spaces': 2, + 'no-multi-str': 2, + 'no-multiple-empty-lines': [2, { + 'max': 1 + }], + 'no-native-reassign': 2, + 'no-negated-in-lhs': 2, + 'no-new-object': 2, + 'no-new-require': 2, + 'no-new-symbol': 2, + 'no-new-wrappers': 2, + 'no-obj-calls': 2, + 'no-octal': 2, + 'no-octal-escape': 2, + 'no-path-concat': 2, + 'no-proto': 2, + 'no-redeclare': 2, + 'no-regex-spaces': 2, + 'no-return-assign': [2, 'except-parens'], + 'no-self-assign': 2, + 'no-self-compare': 2, + 'no-sequences': 2, + 'no-shadow-restricted-names': 2, + 'no-spaced-func': 2, + 'no-sparse-arrays': 2, + 'no-this-before-super': 2, + 'no-throw-literal': 2, + 'no-trailing-spaces': 2, + 'no-undef': 2, + 'no-undef-init': 2, + 'no-unexpected-multiline': 2, + 'no-unmodified-loop-condition': 2, + 'no-unneeded-ternary': [2, { + 'defaultAssignment': false + }], + 'no-unreachable': 2, + 'no-unsafe-finally': 2, + 'no-unused-vars': [2, { + 'vars': 'all', + 'args': 'none' + }], + 'no-useless-call': 2, + 'no-useless-computed-key': 2, + 'no-useless-constructor': 2, + 'no-useless-escape': 0, + 'no-whitespace-before-property': 2, + 'no-with': 2, + 'one-var': [2, { + 'initialized': 'never' + }], + 'operator-linebreak': [2, 'after', { + 'overrides': { + '?': 'before', + ':': 'before' + } + }], + 'padded-blocks': [2, 'never'], + 'quotes': [2, 'single', { + 'avoidEscape': true, + 'allowTemplateLiterals': true + }], + 'semi': [2, 'never'], + 'semi-spacing': [2, { + 'before': false, + 'after': true + }], + 'space-before-blocks': [2, 'always'], + 'space-before-function-paren': [2, 'never'], + 'space-in-parens': [2, 'never'], + 'space-infix-ops': 2, + 'space-unary-ops': [2, { + 'words': true, + 'nonwords': false + }], + 'spaced-comment': [2, 'always', { + 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] + }], + 'template-curly-spacing': [2, 'never'], + 'use-isnan': 2, + 'valid-typeof': 2, + 'wrap-iife': [2, 'any'], + 'yield-star-spacing': [2, 'both'], + 'yoda': [2, 'never'], + 'prefer-const': 2, + 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, + 'object-curly-spacing': [2, 'always', { + objectsInObjects: false + }], + 'array-bracket-spacing': [2, 'never'] } -}; +} diff --git a/.prettierrc b/.prettierrc index f07ff5b..26e9376 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,20 +1,24 @@ { - "printWidth": 120, - "tabWidth": 2, - "singleQuote": true, - "trailingComma": "none", - "semi": false, - "wrap_line_length": 120, - "wrap_attributes": "auto", - "proseWrap": "always", - "arrowParens": "avoid", - "bracketSpacing": false, - "jsxBracketSameLine": true, - "useTabs": false, - "overrides": [{ - "files": ".prettierrc", - "options": { - "parser": "json" - } - }] -} \ No newline at end of file + "printWidth": 120, + "tabWidth": 2, + "singleQuote": true, + "trailingComma": "none", + "semi": false, + "wrap_line_length": 120, + "wrap_attributes": "auto", + "proseWrap": "always", + "arrowParens": "avoid", + "bracketSpacing": true, + "jsxBracketSameLine": true, + "useTabs": false, + "eslintIntegration":true, + "overrides": [ + { + "files": ".prettierrc", + "options": { + "parser": "json" + } + } + ], + "endOfLine": "auto" +} diff --git a/README.md b/README.md index 3ad51be..986def5 100644 --- a/README.md +++ b/README.md @@ -565,7 +565,7 @@ module.exports = { // publicPath: '/app/', // 署应用包时的基本 URL。 vue-router history模式使用 outputDir: 'dist', // 生产环境构建文件的目录 assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录 - lintOnSave: false, + lintOnSave: process.env.NODE_ENV !== IS_PROD, productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。 devServer: { port: 9020, // 端口号 @@ -874,7 +874,9 @@ module.exports = { [▲ 回顶部](#top) -### ✅ Eslint+Pettier 统一开发规范 +### ✅ Eslint + Pettier 统一开发规范 + +VScode 安装 `eslint` `prettier` `vetur` 插件 在文件 `.prettierrc` 里写 属于你的 pettier 规则 @@ -900,7 +902,27 @@ module.exports = { }] } ``` + Vscode setting.json 设置 +```bash + "[vue]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[javascript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + // 保存时用eslint格式化 + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + }, + // 两者会在格式化js时冲突,所以需要关闭默认js格式化程序 + "javascript.format.enable": false, + "typescript.format.enable": false, + "vetur.format.defaultFormatter.html": "none", + // js/ts程序用eslint,防止vetur中的prettier与eslint格式化冲突 + "vetur.format.defaultFormatter.js": "none", + "vetur.format.defaultFormatter.ts": "none", +``` [▲ 回顶部](#top) # 鸣谢 diff --git a/package-lock.json b/package-lock.json index 26959cf..0b10a8e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -827,24 +827,6 @@ "@babel/helper-plugin-utils": "^7.8.3" } }, - "@babel/polyfill": { - "version": "7.8.3", - "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.8.3.tgz", - "integrity": "sha512-0QEgn2zkCzqGIkSWWAEmvxD7e00Nm9asTtQvi7HdlYvMhjy/J38V/1Y9ode0zEJeIuxAI0uftiAzqc7nVeWUGg==", - "dev": true, - "requires": { - "core-js": "^2.6.5", - "regenerator-runtime": "^0.13.2" - }, - "dependencies": { - "core-js": { - "version": "2.6.11", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz", - "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==", - "dev": true - } - } - }, "@babel/preset-env": { "version": "7.8.4", "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.8.4.tgz", @@ -4646,11 +4628,12 @@ } }, "eslint-plugin-vue": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.1.2.tgz", - "integrity": "sha512-M75oAB+2a/LNkLKRbeEaS07EjzjIUaV7/hYoHAfRFeeF8ZMmCbahUn8nQLsLP85mkar24+zDU3QW2iT1JRsACw==", + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.2.2.tgz", + "integrity": "sha512-Nhc+oVAHm0uz/PkJAWscwIT4ijTrK5fqNqz9QB1D35SbbuMG1uB6Yr5AJpvPSWg+WOw7nYNswerYh0kOk64gqQ==", "dev": true, "requires": { + "natural-compare": "^1.4.0", "semver": "^5.6.0", "vue-eslint-parser": "^7.0.0" } @@ -11908,19 +11891,31 @@ "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==" }, "vue-eslint-parser": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz", - "integrity": "sha512-yR0dLxsTT7JfD2YQo9BhnQ6bUTLsZouuzt9SKRP7XNaZJV459gvlsJo4vT2nhZ/2dH9j3c53bIx9dnqU2prM9g==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz", + "integrity": "sha512-Kr21uPfthDc63nDl27AGQEhtt9VrZ9nkYk/NTftJ2ws9XiJwzJJCnCr3AITQ2jpRMA0XPGDECxYH8E027qMK9Q==", "dev": true, "requires": { "debug": "^4.1.1", "eslint-scope": "^5.0.0", "eslint-visitor-keys": "^1.1.0", - "espree": "^6.1.2", + "espree": "^6.2.1", "esquery": "^1.0.1", "lodash": "^4.17.15" }, "dependencies": { + "acorn": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz", + "integrity": "sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==", + "dev": true + }, + "acorn-jsx": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz", + "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==", + "dev": true + }, "eslint-scope": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz", @@ -11930,6 +11925,17 @@ "esrecurse": "^4.1.0", "estraverse": "^4.1.1" } + }, + "espree": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz", + "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==", + "dev": true, + "requires": { + "acorn": "^7.1.1", + "acorn-jsx": "^5.2.0", + "eslint-visitor-keys": "^1.1.0" + } } } }, diff --git a/package.json b/package.json index a1cf222..57dc086 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "babel-plugin-transform-remove-console": "^6.9.4", "eslint": "^6.7.2", "eslint-plugin-prettier": "^3.1.1", - "eslint-plugin-vue": "^6.1.2", + "eslint-plugin-vue": "^6.2.2", "node-sass": "^4.13.1", "postcss-pxtorem": "^4.0.1", "prettier": "^1.19.1", diff --git a/src/views/home/about.vue b/src/views/home/about.vue index 1be997a..28f33dd 100644 --- a/src/views/home/about.vue +++ b/src/views/home/about.vue @@ -4,16 +4,20 @@