以上是来自官方的中文定义（找了半天Logo，发现并没有…俩大写字母太难看）

1. 前置工作

在开始构建TS项目前，建议先把编码环境调整ok，即：统一代码规范及结构，保证提交的是高质量的、同时尽量避免低级错误，最起码看起来爽，让别人知道你不是一个随便的人…

接下来，记录一下prettier、eslint|tslint、husky、lint-staged套装的使用。

依赖情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
// .eslintrc.json内
{
	"extends": [
		"standard",
		"plugin:prettier/recommended"
	],
	"parserOptions": {
		"ecmaVersion": 7,
		"sourceType": "module",
		"ecmaFeatures": {
			"jsx": true
		}
	},
	"parser": "babel-eslint",
	"env": {
		"es6": true,
		"browser": true,
		"node": true
	},
	"plugins": ["react", "jsx-a11y", "import"],
	"rules": {
		"prettier/prettier": "error",
		"class-methods-use-this": 0,
		"import/no-named-as-default": 0,
		"react/jsx-filename-extension": [
			"error",
			{
				"extensions": [".js", ".jsx"]
			}
		]
	}
}

// .prettierrc内（注意这个文件没有后缀。据说是加后缀VSCode不认，本人偏爱JB全家桶，所以没试过...）
{
  "printWidth": 180,
  "tabWidth": 4,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": false,
  "jsxBracketSameLine": true,
  "arrowParens": "always"
}

// package.json内
{
    "devDependencies": {
        "typescript": "^3.2.2",
        "typedoc": "^0.13.0",
        "babel-eslint": "^10.0.1",
        "eslint": "^5.11.1",
        "eslint-config-prettier": "^3.3.0",
        "eslint-config-standard": "^12.0.0",
        "eslint-plugin-import": "^2.14.0",
        "eslint-plugin-jsx-a11y": "^6.1.2",
        "eslint-plugin-standard": "^4.0.0",
        "eslint-plugin-react": "^7.12.0",
        "eslint-plugin-node": "^8.0.0",
        "eslint-plugin-prettier": "^3.0.1",
        "eslint-plugin-promise": "^4.0.1",
        "prettier": "^1.15.3",
        "husky": "^1.3.1",
        "lint-staged": "^8.1.0"
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "src/**/*.{jsx,txs,ts,js,json,css,md}": [
            "prettier --write",
            "eslint --fix",
            "git add"
        ]
    }
}

以上环境配好后，可以试着在src下建一个*.js文件。随便写点东西，然后咱们提交代码，看看发生了啥~

嗷嗷，如此犀利是不是。以上是针对ES的，来看下TS大法的~

  • 新增俩文件：tslint.json和tsconfig.json，前者是规范约束文件，后者是ts编译参数配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// tslint.json
{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended",
        "tslint-config-prettier"
    ]
}

// tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "target": "es6",
    "moduleResolution": "node",
    "allowJs": true,
    "module": "umd",
    "outDir": "./dist",
    "experimentalDecorators": true
  },
  "exclude": [
    "node_modules"
  ]
}

// package.json
{
    "tslint": "^5.12.0",
    "tslint-config-prettier": "^1.17.0"
}

// 其中scripts内需要配上tsc
"scripts": {
    "build": "tsc",
    "prepare": "npm run build"
}

关于这个架手架的源码，可以参考这里：TypeScript

到现在为止，好像关于写TS的事情并没有记录。做了太多前置工作，内容放到part2吧…

另外，叨叨一句，EditorConfig可以不用了（要了也是多余）

参考资料：

使用ESLint+Prettier来统一前端代码风格

专治代码洁癖系列