微信与WebStorm开发常见问题01
微信与WebStorm开发常见问题01
微信与WebStorm开发常见问题01

webstorm支持wx语法提示

1
2
3
4
5
6
7
当前webstorm版本2023.1.5

01)安装插件  Wechat mini program support
   插件地址: https://plugins.jetbrains.com/plugin/13396-wechat-mini-program-support
   
02) settings/Languages & Frameworks /JavaScript /Libraries/  
    把这个里面的配置 uni-api 勾选上就可以了

wx语法提示

webstorm支持@语法跳转

当前webstorm版本2023.1.5

1) 配置映射路径在app.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
> {
>   "pages": [
>     "pages/index/index",
>     "pages/index/my",
>   ],
>   "window": {
>     "navigationBarTitleText": "跳转路径配置在resolveAlias",
>     "navigationBarTextStyle": "black",
>     "navigationBarBackgroundColor": "#ffffff",
>     "navigationStyle": "custom"
>   },
>   "resolveAlias": {
>     "~/*": "/*",
>     "@/config/*": "config/*",
>     "@/utils/*": "utils/*"
>   }
> }
>

官网: resolveAlias映射

2) 在项目更路径下创建文件jsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
13
> 这个app.json 就是在根路径下面
> {
>   "compilerOptions": {
>     "baseUrl": "./",
>     "paths": {
>       "@/*": [
>         "/*"
>       ]
>     }
>   },
>   "exclude": ["node_modules", "miniprogram_npm"]
> }
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
> 这个app.json 和 jsconfig.json不是同一层
> {
>   "compilerOptions": {
>     "baseUrl": "./",
>     "paths": {
>       "@/*": [
>         "miniprogram/*"
>       ]
>     }
>   },
>   "exclude": ["node_modules", "miniprogram_npm"]
> }
> 
>

路径跳转和映射

代码格式化prettier

当前webstorm版本2023.1.5

1
npm install prettier --save-dev

让webstorm中支持prettier格式化代码

1
2
3
4
5
01)安装  File->Settings->Plugins( 搜索 prettier)
02)配置  File->Setting->Languages & Frmeworks->JavaScript->prettier 中修改Run for files
        {**/*,*}.{js,ts,jsx,tsx,vue,astro,wxml,wxss}
03)在项目中安装: npm install prettier --save-dev
04)在 package.json 同级目录下面创建 .prettierrc.json 文件,内容如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.prettierrc.json文件内容
{
  "semi": false,
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "vueIndentScriptAndStyle": true,
  "endOfLine": "auto",
  "proseWrap": "never",
  "htmlWhitespaceSensitivity": "strict"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.prettierrc.json文件内容( 如果上面文件不生效可以用这个)

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "vueIndentScriptAndStyle": true,
  "endOfLine": "auto",
  "proseWrap": "never",
  "htmlWhitespaceSensitivity": "strict",
  "overrides": [
    {"files": "*.wxml", "options": {"parser": "html"}}, 
    {"files": "*.wxss", "options": {"parser": "css"}}, 
    {"files": "*.wxs", "options": {"parser": "babel"}}
  ]
}

代码格式化

  1. WebStorm官网: prettier
  2. prettier官网: 配置文件

底部

  1. 官网: 基本语法
  2. xxxx