├── .gitignore ├── .npmignore ├── README.md ├── eslintrc.js ├── example ├── .eslintrc.js ├── .vscode │ └── setting.json ├── package.json ├── src │ ├── foo.js │ ├── foo.ts │ └── test.vue └── tsconfig.json ├── images ├── eslint.jpg └── vscode.png ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | yarn.lock 4 | .DS_Store -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | example 2 | .vscode -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Standardjs Spec with .vue|js|ts files 2 | 3 | 由于 [standardjs](https://standardjs.com/) 官方对 Vue 的支持不足，导致无法直接在 cli 使用 `standard --plugin vue **/*.vue` 命令来检查/修复 .vue 文件的语法错误。必须需要显示创建 .eslintrc.js 文件。 4 | 出于该原因在这里我编写了一个 eslint 扩展。排除了网络上的错误的，过时的，复杂的答案。保证你使用最简单的方式在项目里集成 standard 规范。 5 | 6 | ## 为什么要选择 standard 7 | 8 | 如果你是非 vue 项目，react|js|ts 均可完美与 standard 结合。只需安装一个依赖即可实现 lint 功能 9 | 10 | - 无须配置。 史上最便捷的统一代码风格的方式，轻松拥有。 11 | - 自动代码格式化。 只需运行 standard --fix 从此和脏乱差的代码说再见。 12 | - 提前发现风格及程序问题。 减少代码审查过程中反反复复的修改过程，节约时间。 13 | 14 | ## How to use standard in vue project 15 | 16 | 如何与 vue 项目结合使用，一个具体的 [example](./example/.eslintrc.js) 实现可以查看当前项目的 example 配置 17 | 18 | ### 安装依赖 19 | 20 | 只需安装一个依赖即可 21 | 22 | ```bash 23 | $ npm i eslint-config-standard-vue-ts --save-dev 24 | ``` 25 | 26 | ### 创建 .eslintrc.js 27 | 28 | ```js 29 | module.exports = { 30 | extends: [ 31 | 'standard-vue-ts' 32 | ], 33 | // 如果你还需要检测 ts 文件则添加该项，并且保证根目录有 tsconfig.json 文件 34 | parserOptions: { 35 | project: './tsconfig.json' 36 | } 37 | } 38 | 39 | ``` 40 | 41 | ### 添加脚本命令 42 | 43 | ```json 44 | "lint": "eslint ./ --ext .js,.vue,.ts", 45 | "lint:fix": "eslint ./ --ext .js,.vue,.ts --fix" 46 | ``` 47 | 48 | ## VSCode formatOnSave 49 | 50 | 开启 VSCode 保存自动格式化能力 51 | 52 | ### 安装 plugin 53 | 54 | 安装下载量最高的 eslint plugin，这里注意如果你还在使用 `eslint.formatOnSave` 说明你当前用的是旧的 eslint 插件 55 | 56 | ![](./images/eslint.jpg) 57 | 58 | ### vscode setting 59 | 60 | 必须包含以下配置 61 | 62 | ```js 63 | { 64 | "editor.codeActionsOnSave": { 65 | // 保存自动格式化 66 | "source.fixAll.eslint": true 67 | }, 68 | "eslint.validate": [ 69 | "javascript", 70 | "javascriptreact", 71 | { 72 | "language": "vue", 73 | "autoFix": true 74 | } 75 | ], 76 | "files.associations": { 77 | "*.vue": "vue" 78 | } 79 | } 80 | ``` 81 | 82 | ### 成功提示 83 | 84 | 如果你成功的进行了配置，那么你将会在 VSCode 中看到错误提示，如果没看到则意味着你的配置并没有成功 85 | 86 | ![](./images/vscode.png) 87 | 88 | ## Readme 89 | 90 | 这里着重介绍 standardjs 规范与大部分人的传统习惯可能不太一致的地方 91 | 92 | - 不写分号，这没有什么不好。懂得什么情况下不写分号会导致错误(这种情况你应该一辈子也碰不上)比你永远加分号要好得多 ref: [JavaScript 语句后应该加分号么？](https://www.zhihu.com/question/20298345/answer/49551142) 93 | - 使用驼峰命名禁止使用下划线这会拉长你的词距, 不得不承认的是 JS 世界更加 like 驼峰 94 | - 使用单引号 95 | - 不再有冗余的变量 – 这是导致 大量 bug 的源头! 96 | - 关键字后加空格 if (condition) { ... } 97 | - 函数名后加空格 function name (arg) { ... } 98 | - 坚持使用全等 === 摒弃 == 一但在需要检查 null || undefined 时可以使用 obj == null。 99 | - 一定要处理 Node.js 中错误回调传递进来的 err 参数。 100 | - 使用浏览器全局变量时加上 window 前缀 – document 和 navigator 除外 101 | - 避免无意中使用到了这些命名看上去很普通的全局变量， open, length, event 还有 name。 102 | - [查看更多](https://standardjs.com/rules-zhcn.html#javascript-standard-style) – 为何不试试 standard 规范呢！ 103 | 104 | ## Feature 105 | 106 | - 只需创建一个文件，安装一个依赖即可，抛弃繁琐的配置文件依赖 107 | - 无需安装 tslint (事实上tslint 已经接近废弃，功能已经以插件的形式被 eslint 全部包含) ref: [那些你应该考虑卸载的 VSCode 扩展](https://zhuanlan.zhihu.com/p/125773296) 108 | - 针对所有类型的文件使用同一套规范 109 | - 最简单的 eslint 配置 110 | - 允许 vue 组件每多个属性在一行 （这块 vue 与 standard 官方的态度相反，vue 建议每个属性换行，standard 禁止。相信我不要让每一个 props 都换行，这会导致你一个非常简单的组件都会超过100行并且这看起来一点也不优雅。只有超过某个数量(这里设置为8个)才换行。这里并没有找到有什么配置能够在 eslint fix 的时候去掉多属性换行改为合在一行，如果你发现了如何实现欢迎来提交 PR 111 | 112 | ## FAQ 113 | 114 | 常见问题收录 115 | 116 | ### 这个规范与我的习惯差距很大怎么办 117 | 118 | 不要拘泥于你的习惯一成不变，虽然一些语法没有优劣之分，但不得不承认的是大部分的语法以今天的发展眼光看来都是设计的非常落后的。follow 这套最先进的规范，无论对你还是对团队都是提升。就像 PHP 的大部分语法设计都是被人诟病的。大部分模版引擎的语法设计也十分的反人类极其的落后难用。 119 | 120 | ### 如果我不同意某条规则，可以改吗？ 121 | 不行。制定这套 standard 规范的目的就是让大家都不必再花时间浪费在无谓的代码风格之争上面了。关于缩进该用制表符还是空格这个问题已经争论了很久了，永远也没有答案。争论这个都可以把需求提前写完了。遵循 standard 规范，你就不用再犹豫了，毕竟不管怎样争论总归会选择一种风格的。希望大家也能在个人语义和普适价值上做一个权衡。 122 | 123 | 如果你非要自己去配置成百上千项的 ESLint 规则，那你可以直接使用 eslint-config-standard 来将个人配置包装在上层。 124 | 125 | 小贴士：选择 standard 然后保持吧。把时间留下来解决其他有意义的问题！(^____^)/ 126 | 127 | ### 毕竟这不是一份正式的 Web 规范啊！ 128 | 129 | 确实！这份规范不隶属于任何官方组织，所以才叫 standard/standard 而不是 ECMA/standard 嘛。 130 | 131 | 而 standard (标准) 一词在这里不局限于 “web 标准” :-) 。 举个例子： 132 | 133 | 这个模块帮助我们将代码维持在一个高的水准（standard of quality） 134 | 这个模块确定项目中的新手遵循一些基本的样式规范（style standards） 135 | -------------------------------------------------------------------------------- /eslintrc.js: -------------------------------------------------------------------------------- 1 | 2 | const { existsSync } = require('fs') 3 | const { resolve } = require('path') 4 | 5 | const hasLintJson = existsSync(resolve(process.cwd(), './tsconfig.lint.json')) 6 | const project = hasLintJson ? resolve(process.cwd(), './tsconfig.lint.json') : resolve(process.cwd(), './tsconfig.json') 7 | 8 | module.exports = { 9 | extends: [ 10 | 'plugin:vue/vue3-recommended', 11 | 'standard', 12 | 'standard-with-typescript' 13 | ], 14 | parser: 'vue-eslint-parser', 15 | parserOptions: { 16 | parser: '@typescript-eslint/parser', 17 | project, 18 | extraFileExtensions: ['.vue'], 19 | createDefaultProgram: true 20 | }, 21 | rules: { 22 | 'vue/max-attributes-per-line': ['error', 23 | { 24 | singleline: 8, 25 | multiline: { 26 | max: 8, 27 | allowFirstLine: true 28 | } 29 | } 30 | ], 31 | 'vue/attribute-hyphenation': 'off', 32 | 'vue/no-deprecated-v-bind-sync': 'off', 33 | '@typescript-eslint/explicit-function-return-type': 'off', 34 | '@typescript-eslint/strict-boolean-expressions': 'off', 35 | '@typescript-eslint/consistent-type-assertions': 'off', 36 | '@typescript-eslint/restrict-plus-operands': 'off', 37 | '@typescript-eslint/restrict-template-expressions': 'off', 38 | '@typescript-eslint/no-misused-promises': 'off', 39 | 'import/export': 'off', 40 | 'vue/require-prop-types': 'off', 41 | '@typescript-eslint/dot-notation': ['off'], 42 | 'padded-blocks': ['off'], 43 | '@typescript-eslint/no-var-requires': ['off'] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /example/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | 'standard-vue-ts' 4 | ], 5 | parserOptions: { 6 | project: './tsconfig.json' 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /example/.vscode/setting.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.codeActionsOnSave": { 3 | "source.fixAll.eslint": true 4 | }, 5 | "eslint.validate": [ 6 | "javascript", 7 | "javascriptreact", 8 | { 9 | "language": "vue", 10 | "autoFix": true 11 | } 12 | ] 13 | } -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "standard-vue-ts-example", 3 | "version": "1.0.0", 4 | "description": "standardjs with vue", 5 | "scripts": { 6 | "lint": "eslint src --ext .js,.vue,.ts", 7 | "lint:fix": "eslint src --ext .js,.vue,.ts --fix" 8 | }, 9 | "author": "yuuangzhang", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "eslint-config-standard-vue-ts": "^1.0.3" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /example/src/foo.js: -------------------------------------------------------------------------------- 1 | const foo = 'foo' 2 | -------------------------------------------------------------------------------- /example/src/foo.ts: -------------------------------------------------------------------------------- 1 | const foo = 'foo' 2 | -------------------------------------------------------------------------------- /example/src/test.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": true, 3 | "compilerOptions": { 4 | "moduleResolution": "node", 5 | "experimentalDecorators": true, 6 | "emitDecoratorMetadata": true, 7 | "inlineSourceMap":true, 8 | "noImplicitThis": true, 9 | "noUnusedLocals": true, 10 | "stripInternal": true, 11 | "pretty": true, 12 | "declaration": true, 13 | "strict": true, 14 | "jsx": "react" 15 | }, 16 | "include": [ 17 | "src" 18 | ] 19 | } -------------------------------------------------------------------------------- /images/eslint.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyuang/standardjs-vue/273534d0d1a58d1ad3da3310b022c06622b2f7c2/images/eslint.jpg -------------------------------------------------------------------------------- /images/vscode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangyuang/standardjs-vue/273534d0d1a58d1ad3da3310b022c06622b2f7c2/images/vscode.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./eslintrc.js') 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eslint-config-standard-vue-ts", 3 | "version": "1.0.21", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "yuuangzhang", 7 | "license": "ISC", 8 | "dependencies": { 9 | "@typescript-eslint/parser": "^4.0.0", 10 | "@typescript-eslint/eslint-plugin": "^4.1.1", 11 | "babel-eslint": "^10.1.0", 12 | "eslint": "^7.9.0", 13 | "eslint-config-standard": "^14.1.1", 14 | "eslint-config-standard-with-typescript": "^19.0.1", 15 | "eslint-plugin-import": "^2.22.0", 16 | "eslint-plugin-node": "^11.1.0", 17 | "eslint-plugin-promise": "^4.2.1", 18 | "eslint-plugin-standard": "^4.0.1", 19 | "eslint-plugin-vue": "^7.0.0-beta.3", 20 | "vue-eslint-parser": "^7.6.0" 21 | }, 22 | "peerDependencies": { 23 | "typescript": ">=3.9.0" 24 | } 25 | } 26 | --------------------------------------------------------------------------------