Skip to content

xqz / dianDemo

Go to a project
Toggle navigation
Toggle navigation pinning
a8459319 by sunnie
Options

eslint 规则，prettier 设置

1 parent af214cea
Inline Side-by-side
Showing 8 changed files with 277 additions and 72 deletions
.eslintrc.js
...@@ -3,13 +3,190 @@ module.exports = { ...@@ -3,13 +3,190 @@ module.exports = {
3 env: { 3 env: {
4 node: true 4 node: true
5 }, 5 },
6 extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"], 6 extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
7 parserOptions: { 7 parserOptions: {
8 parser: "babel-eslint" 8 parser: 'babel-eslint'
9 }, 9 },
10 rules: { 10 rules: {
11 "no-console": process.env.NODE_ENV === "production" ? "error" : "off", 11 "vue/max-attributes-per-line": [2, {
12 "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", 12 "singleline": 10,
13 13 "multiline": {
14 "max": 1,
15 "allowFirstLine": false
16 }
17 }],
18 "vue/singleline-html-element-content-newline": "off",
19 "vue/multiline-html-element-content-newline":"off",
20 "vue/name-property-casing": ["error", "PascalCase"],
21 "vue/no-v-html": "off",
22 'accessor-pairs': 2,
23 'arrow-spacing': [2, {
24 'before': true,
25 'after': true
26 }],
27 'block-spacing': [2, 'always'],
28 'brace-style': [2, '1tbs', {
29 'allowSingleLine': true
30 }],
31 'camelcase': [0, {
32 'properties': 'always'
33 }],
34 'comma-dangle': [2, 'never'],
35 'comma-spacing': [2, {
36 'before': false,
37 'after': true
38 }],
39 'comma-style': [2, 'last'],
40 'constructor-super': 2,
41 'curly': [2, 'multi-line'],
42 'dot-location': [2, 'property'],
43 'eol-last': 2,
44 'eqeqeq': ["error", "always", {"null": "ignore"}],
45 'generator-star-spacing': [2, {
46 'before': true,
47 'after': true
48 }],
49 'handle-callback-err': [2, '^(err|error)$'],
50 'indent': [2, 2, {
51 'SwitchCase': 1
52 }],
53 'jsx-quotes': [2, 'prefer-single'],
54 'key-spacing': [2, {
55 'beforeColon': false,
56 'afterColon': true
57 }],
58 'keyword-spacing': [2, {
59 'before': true,
60 'after': true
61 }],
62 'new-cap': [2, {
63 'newIsCap': true,
64 'capIsNew': false
65 }],
66 'new-parens': 2,
67 'no-array-constructor': 2,
68 'no-caller': 2,
69 'no-console': 'off',
70 'no-class-assign': 2,
71 'no-cond-assign': 2,
72 'no-const-assign': 2,
73 'no-control-regex': 0,
74 'no-delete-var': 2,
75 'no-dupe-args': 2,
76 'no-dupe-class-members': 2,
77 'no-dupe-keys': 2,
78 'no-duplicate-case': 2,
79 'no-empty-character-class': 2,
80 'no-empty-pattern': 2,
81 'no-eval': 2,
82 'no-ex-assign': 2,
83 'no-extend-native': 2,
84 'no-extra-bind': 2,
85 'no-extra-boolean-cast': 2,
86 'no-extra-parens': [2, 'functions'],
87 'no-fallthrough': 2,
88 'no-floating-decimal': 2,
89 'no-func-assign': 2,
90 'no-implied-eval': 2,
91 'no-inner-declarations': [2, 'functions'],
92 'no-invalid-regexp': 2,
93 'no-irregular-whitespace': 2,
94 'no-iterator': 2,
95 'no-label-var': 2,
96 'no-labels': [2, {
97 'allowLoop': false,
98 'allowSwitch': false
99 }],
100 'no-lone-blocks': 2,
101 'no-mixed-spaces-and-tabs': 2,
102 'no-multi-spaces': 2,
103 'no-multi-str': 2,
104 'no-multiple-empty-lines': [2, {
105 'max': 1
106 }],
107 'no-native-reassign': 2,
108 'no-negated-in-lhs': 2,
109 'no-new-object': 2,
110 'no-new-require': 2,
111 'no-new-symbol': 2,
112 'no-new-wrappers': 2,
113 'no-obj-calls': 2,
114 'no-octal': 2,
115 'no-octal-escape': 2,
116 'no-path-concat': 2,
117 'no-proto': 2,
118 'no-redeclare': 2,
119 'no-regex-spaces': 2,
120 'no-return-assign': [2, 'except-parens'],
121 'no-self-assign': 2,
122 'no-self-compare': 2,
123 'no-sequences': 2,
124 'no-shadow-restricted-names': 2,
125 'no-spaced-func': 2,
126 'no-sparse-arrays': 2,
127 'no-this-before-super': 2,
128 'no-throw-literal': 2,
129 'no-trailing-spaces': 2,
130 'no-undef': 2,
131 'no-undef-init': 2,
132 'no-unexpected-multiline': 2,
133 'no-unmodified-loop-condition': 2,
134 'no-unneeded-ternary': [2, {
135 'defaultAssignment': false
136 }],
137 'no-unreachable': 2,
138 'no-unsafe-finally': 2,
139 'no-unused-vars': [2, {
140 'vars': 'all',
141 'args': 'none'
142 }],
143 'no-useless-call': 2,
144 'no-useless-computed-key': 2,
145 'no-useless-constructor': 2,
146 'no-useless-escape': 0,
147 'no-whitespace-before-property': 2,
148 'no-with': 2,
149 'one-var': [2, {
150 'initialized': 'never'
151 }],
152 'operator-linebreak': [2, 'after', {
153 'overrides': {
154 '?': 'before',
155 ':': 'before'
156 }
157 }],
158 'padded-blocks': [2, 'never'],
159 'quotes': [2, 'single', {
160 'avoidEscape': true,
161 'allowTemplateLiterals': true
162 }],
163 'semi': [2, 'never'],
164 'semi-spacing': [2, {
165 'before': false,
166 'after': true
167 }],
168 'space-before-blocks': [2, 'always'],
169 'space-before-function-paren': [2, 'never'],
170 'space-in-parens': [2, 'never'],
171 'space-infix-ops': 2,
172 'space-unary-ops': [2, {
173 'words': true,
174 'nonwords': false
175 }],
176 'spaced-comment': [2, 'always', {
177 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
178 }],
179 'template-curly-spacing': [2, 'never'],
180 'use-isnan': 2,
181 'valid-typeof': 2,
182 'wrap-iife': [2, 'any'],
183 'yield-star-spacing': [2, 'both'],
184 'yoda': [2, 'never'],
185 'prefer-const': 2,
186 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
187 'object-curly-spacing': [2, 'always', {
188 objectsInObjects: false
189 }],
190 'array-bracket-spacing': [2, 'never']
14 } 191 }
15 }; 192 }
......
.prettierrc
1 { 1 {
2 "printWidth": 120,
3 "tabWidth": 2,
4 "singleQuote": true,
5 "trailingComma": "none",
6 "semi": false,
7 "wrap_line_length": 120,
8 "wrap_attributes": "auto",
9 "proseWrap": "always",
10 "arrowParens": "avoid",
11 "bracketSpacing": false,
12 "jsxBracketSameLine": true,
13 "useTabs": false,
14 "overrides": [{
15 "files": ".prettierrc",
16 "options": {
17 "parser": "json"
18 }
19 }]
20 }
...\ No newline at end of file ...\ No newline at end of file
2 "printWidth": 120,
3 "tabWidth": 2,
4 "singleQuote": true,
5 "trailingComma": "none",
6 "semi": false,
7 "wrap_line_length": 120,
8 "wrap_attributes": "auto",
9 "proseWrap": "always",
10 "arrowParens": "avoid",
11 "bracketSpacing": true,
12 "jsxBracketSameLine": true,
13 "useTabs": false,
14 "eslintIntegration":true,
15 "overrides": [
16 {
17 "files": ".prettierrc",
18 "options": {
19 "parser": "json"
20 }
21 }
22 ],
23 "endOfLine": "auto"
24 }
......
README.md
...@@ -565,7 +565,7 @@ module.exports = { ...@@ -565,7 +565,7 @@ module.exports = {
565 // publicPath: '/app/', // 署应用包时的基本 URL。 vue-router history模式使用 565 // publicPath: '/app/', // 署应用包时的基本 URL。 vue-router history模式使用
566 outputDir: 'dist', // 生产环境构建文件的目录 566 outputDir: 'dist', // 生产环境构建文件的目录
567 assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录 567 assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录
568 lintOnSave: false, 568 lintOnSave: process.env.NODE_ENV !== IS_PROD,
569 productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。 569 productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
570 devServer: { 570 devServer: {
571 port: 9020, // 端口号 571 port: 9020, // 端口号
...@@ -874,7 +874,9 @@ module.exports = { ...@@ -874,7 +874,9 @@ module.exports = {
874 874
875 [▲ 回顶部](#top) 875 [▲ 回顶部](#top)
876 876
877 ### <span id="pettier">✅ Eslint+Pettier 统一开发规范 </span> 877 ### <span id="pettier">✅ Eslint + Pettier 统一开发规范 </span>
878
879 VScode 安装 `eslint` `prettier` `vetur` 插件
878 880
879 在文件 `.prettierrc` 里写 属于你的 pettier 规则 881 在文件 `.prettierrc` 里写 属于你的 pettier 规则
880 882
...@@ -900,7 +902,27 @@ module.exports = { ...@@ -900,7 +902,27 @@ module.exports = {
900 }] 902 }]
901 } 903 }
902 ``` 904 ```
905 Vscode setting.json 设置
903 906
907 ```bash
908 "[vue]": {
909 "editor.defaultFormatter": "esbenp.prettier-vscode"
910 },
911 "[javascript]": {
912 "editor.defaultFormatter": "esbenp.prettier-vscode"
913 },
914 // 保存时用eslint格式化
915 "editor.codeActionsOnSave": {
916 "source.fixAll.eslint": true
917 },
918 // 两者会在格式化js时冲突，所以需要关闭默认js格式化程序
919 "javascript.format.enable": false,
920 "typescript.format.enable": false,
921 "vetur.format.defaultFormatter.html": "none",
922 // js/ts程序用eslint，防止vetur中的prettier与eslint格式化冲突
923 "vetur.format.defaultFormatter.js": "none",
924 "vetur.format.defaultFormatter.ts": "none",
925 ```
904 [▲ 回顶部](#top) 926 [▲ 回顶部](#top)
905 927
906 # 鸣谢​ 928 # 鸣谢​
......
package-lock.json
...@@ -827,24 +827,6 @@ ...@@ -827,24 +827,6 @@
827 "@babel/helper-plugin-utils": "^7.8.3" 827 "@babel/helper-plugin-utils": "^7.8.3"
828 } 828 }
829 }, 829 },
830 "@babel/polyfill": {
831 "version": "7.8.3",
832 "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.8.3.tgz",
833 "integrity": "sha512-0QEgn2zkCzqGIkSWWAEmvxD7e00Nm9asTtQvi7HdlYvMhjy/J38V/1Y9ode0zEJeIuxAI0uftiAzqc7nVeWUGg==",
834 "dev": true,
835 "requires": {
836 "core-js": "^2.6.5",
837 "regenerator-runtime": "^0.13.2"
838 },
839 "dependencies": {
840 "core-js": {
841 "version": "2.6.11",
842 "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
843 "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==",
844 "dev": true
845 }
846 }
847 },
848 "@babel/preset-env": { 830 "@babel/preset-env": {
849 "version": "7.8.4", 831 "version": "7.8.4",
850 "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.8.4.tgz", 832 "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.8.4.tgz",
...@@ -4646,11 +4628,12 @@ ...@@ -4646,11 +4628,12 @@
4646 } 4628 }
4647 }, 4629 },
4648 "eslint-plugin-vue": { 4630 "eslint-plugin-vue": {
4649 "version": "6.1.2", 4631 "version": "6.2.2",
4650 "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.1.2.tgz", 4632 "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.2.2.tgz",
4651 "integrity": "sha512-M75oAB+2a/LNkLKRbeEaS07EjzjIUaV7/hYoHAfRFeeF8ZMmCbahUn8nQLsLP85mkar24+zDU3QW2iT1JRsACw==", 4633 "integrity": "sha512-Nhc+oVAHm0uz/PkJAWscwIT4ijTrK5fqNqz9QB1D35SbbuMG1uB6Yr5AJpvPSWg+WOw7nYNswerYh0kOk64gqQ==",
4652 "dev": true, 4634 "dev": true,
4653 "requires": { 4635 "requires": {
4636 "natural-compare": "^1.4.0",
4654 "semver": "^5.6.0", 4637 "semver": "^5.6.0",
4655 "vue-eslint-parser": "^7.0.0" 4638 "vue-eslint-parser": "^7.0.0"
4656 } 4639 }
...@@ -11908,19 +11891,31 @@ ...@@ -11908,19 +11891,31 @@
11908 "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==" 11891 "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
11909 }, 11892 },
11910 "vue-eslint-parser": { 11893 "vue-eslint-parser": {
11911 "version": "7.0.0", 11894 "version": "7.1.0",
11912 "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz", 11895 "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz",
11913 "integrity": "sha512-yR0dLxsTT7JfD2YQo9BhnQ6bUTLsZouuzt9SKRP7XNaZJV459gvlsJo4vT2nhZ/2dH9j3c53bIx9dnqU2prM9g==", 11896 "integrity": "sha512-Kr21uPfthDc63nDl27AGQEhtt9VrZ9nkYk/NTftJ2ws9XiJwzJJCnCr3AITQ2jpRMA0XPGDECxYH8E027qMK9Q==",
11914 "dev": true, 11897 "dev": true,
11915 "requires": { 11898 "requires": {
11916 "debug": "^4.1.1", 11899 "debug": "^4.1.1",
11917 "eslint-scope": "^5.0.0", 11900 "eslint-scope": "^5.0.0",
11918 "eslint-visitor-keys": "^1.1.0", 11901 "eslint-visitor-keys": "^1.1.0",
11919 "espree": "^6.1.2", 11902 "espree": "^6.2.1",
11920 "esquery": "^1.0.1", 11903 "esquery": "^1.0.1",
11921 "lodash": "^4.17.15" 11904 "lodash": "^4.17.15"
11922 }, 11905 },
11923 "dependencies": { 11906 "dependencies": {
11907 "acorn": {
11908 "version": "7.2.0",
11909 "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz",
11910 "integrity": "sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==",
11911 "dev": true
11912 },
11913 "acorn-jsx": {
11914 "version": "5.2.0",
11915 "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
11916 "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==",
11917 "dev": true
11918 },
11924 "eslint-scope": { 11919 "eslint-scope": {
11925 "version": "5.0.0", 11920 "version": "5.0.0",
11926 "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz", 11921 "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz",
...@@ -11930,6 +11925,17 @@ ...@@ -11930,6 +11925,17 @@
11930 "esrecurse": "^4.1.0", 11925 "esrecurse": "^4.1.0",
11931 "estraverse": "^4.1.1" 11926 "estraverse": "^4.1.1"
11932 } 11927 }
11928 },
11929 "espree": {
11930 "version": "6.2.1",
11931 "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
11932 "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
11933 "dev": true,
11934 "requires": {
11935 "acorn": "^7.1.1",
11936 "acorn-jsx": "^5.2.0",
11937 "eslint-visitor-keys": "^1.1.0"
11938 }
11933 } 11939 }
11934 } 11940 }
11935 }, 11941 },
......
package.json
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
31 "babel-plugin-transform-remove-console": "^6.9.4", 31 "babel-plugin-transform-remove-console": "^6.9.4",
32 "eslint": "^6.7.2", 32 "eslint": "^6.7.2",
33 "eslint-plugin-prettier": "^3.1.1", 33 "eslint-plugin-prettier": "^3.1.1",
34 "eslint-plugin-vue": "^6.1.2", 34 "eslint-plugin-vue": "^6.2.2",
35 "node-sass": "^4.13.1", 35 "node-sass": "^4.13.1",
36 "postcss-pxtorem": "^4.0.1", 36 "postcss-pxtorem": "^4.0.1",
37 "prettier": "^1.19.1", 37 "prettier": "^1.19.1",
......
src/views/home/about.vue
...@@ -4,16 +4,20 @@ ...@@ -4,16 +4,20 @@
4 <div class="warpper"> 4 <div class="warpper">
5 <div class="list"> 5 <div class="list">
6 <div class="logo"></div> 6 <div class="logo"></div>
7 <div class="demo-home__title"> VUE H5开发模板</div> 7 <div class="demo-home__title">VUE H5开发模板</div>
8 <div class="item">项目地址: <a href="https://github.com/sunniejs/vue-h5-template">https://github.com/sunniejs/vue-h5-template</a></div> 8 <div class="item">
9 项目地址:
10 <a href="https://github.com/sunniejs/vue-h5-template">https://github.com/sunniejs/vue-h5-template</a>
11 </div>
9 <div class="item">项目作者: sunnie</div> 12 <div class="item">项目作者: sunnie</div>
10
11 <div class="item"></div> 13 <div class="item"></div>
12 <div class="wechat"> 14 <div class="wechat">
13 <img :src="this.wechat" alt=""> 15 <img :src="this.wechat" alt="" />
14 </div> 16 </div>
15 <div class="item">关注公众号：回复“加群”即可加 前端仙女群</div> 17 <div class="item">关注公众号：回复“加群”即可加 前端仙女群</div>
16 <div class="item">{{userName}} <van-button v-if="userName==''" type="warning" size="small" @click="doDispatch">快点我~</van-button> 18 <div class="item">
19 {{ userName }}
20 <van-button v-if="userName == ''" type="warning" size="small" @click="doDispatch">快点我~</van-button>
17 </div> 21 </div>
18 </div> 22 </div>
19 </div> 23 </div>
...@@ -30,25 +34,20 @@ export default { ...@@ -30,25 +34,20 @@ export default {
30 wechat: `${this.$cdn}/wx/640.gif` 34 wechat: `${this.$cdn}/wx/640.gif`
31 } 35 }
32 }, 36 },
33
34 computed: { 37 computed: {
35 ...mapGetters([ 38 ...mapGetters(['userName'])
36 'userName'
37 ])
38 }, 39 },
39
40 mounted() { 40 mounted() {
41 this.initData() 41 this.initData()
42 }, 42 },
43
44 methods: { 43 methods: {
45 // 请求数据案例 44 // 请求数据案例
46 initData() { 45 initData() {
47 // 请求接口数据，仅作为展示，需要配置src->config下环境文件 46 // 请求接口数据，仅作为展示，需要配置src->config下环境文件
48 const params = { user: 'sunnie' } 47 const params = { user: 'sunnie' }
49 getUserInfo(params) 48 getUserInfo(params)
50 .then(() => { }) 49 .then(() => {})
51 .catch(() => { }) 50 .catch(() => {})
52 }, 51 },
53 // Action 通过 store.dispatch 方法触发 52 // Action 通过 store.dispatch 方法触发
54 doDispatch() { 53 doDispatch() {
......
src/views/home/index.vue
...@@ -33,16 +33,13 @@ export default { ...@@ -33,16 +33,13 @@ export default {
33 'splitChunks 单独打包第三方模块', 33 'splitChunks 单独打包第三方模块',
34 '添加 IE 兼容', 34 '添加 IE 兼容',
35 'Eslint+Pettier 统一开发规范' 35 'Eslint+Pettier 统一开发规范'
36
37 ] 36 ]
38 } 37 }
39 }, 38 },
40 39
41 computed: { 40 computed: {},
42 },
43 41
44 mounted() { 42 mounted() {},
45 },
46 43
47 methods: {} 44 methods: {}
48 } 45 }
......
vue.config.js
...@@ -41,7 +41,7 @@ module.exports = { ...@@ -41,7 +41,7 @@ module.exports = {
41 // publicPath: '/app/', //署应用包时的基本 URL。 vue-router history模式使用 41 // publicPath: '/app/', //署应用包时的基本 URL。 vue-router history模式使用
42 outputDir: 'dist', // 生产环境构建文件的目录 42 outputDir: 'dist', // 生产环境构建文件的目录
43 assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录 43 assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录
44 lintOnSave: false, 44 lintOnSave: process.env.NODE_ENV !== IS_PROD,
45 productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。 45 productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
46 devServer: { 46 devServer: {
47 port: 9020, // 端口 47 port: 9020, // 端口
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!