利用工具提升前端代码质量-微信小程序

最近2周时间从事小程序开发,其代码风格同样需要配套设置,而配置与一般Web开发还是有些许区别,这里Mark下。

配置文件所在位置

小程序项目默认如下,因此package.json/eslint等配置的根目录在miniprogram下,并非在项目根目录下。

eslint

.eslintignore

1
2
3
node_modules
miniprogram_npm
**/*.wxml

注意

  1. wxml作为HTML对待,因此这里对于ES风格需要去掉对wxml的影响

.eslintrc.js

1
2
3
4
5
6
7
8
9
10
globals: {
App: true,
Page: true,
Component: true,
Behavior: true,
wx: true,
getApp: true,
getCurrentPages: true,
__wxConfig: true,
}

增加全局变量声明,这样IDE下使用并不会提醒报eslint --no-undef错,

.prettierrc.js

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
module.exports = {
printWidth: 120,
tabWidth: 2,
useTabs: false,
semi: true,
singleQuote: true,
quoteProps: 'as-needed',
trailingComma: 'es5',
bracketSpacing: true,
arrowParens: 'always',
htmlWhitespaceSensitivity: 'css',
endOfLine: 'lf',
overrides: [
{
files: '*.wxml',
options: {parser: 'html'},
},
{
files: '*.wxss',
options: {parser: 'css'},
},
{
files: '*.wxs',
options: {parser: 'babel'},
},
],
};

对于wxml/wxss采用不同的转译器,从而确保风格处理的正确。

lint-staged

1
2
3
4
5
6
7
8
"lint-staged": {
"**/*.{js,wxs}": [
"eslint --fix"
],
"**/*.{wxml}": [
"prettier --write"
]
}

对于JS采用eslint风格处理,而对于wxml采用prettier。

需要注意,eslint配置中有prettier插件,因此最终JS其实也会经过prettier处理,因此如上并没有明确的调用处理。

写在最后

代码风格并非仅仅是统一代码颜值,更多是统一最佳实践,从而规避一些常见错误。so,重视起来。