webstorm 友好的uniapp配置收藏

柔光的暖阳◎ 2023-07-25 15:29 2阅读 0赞

## 一、rpx提示错误，飘红 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70]

## 二、支持view、image、cover-view、cover-image标签，且支持属性class、src ##

1.支持微信的写法（推荐）

npm i @types/uni-app @types/html5plus -D

2.支持自定义标签

Preferences-Editor-Inspections-HTML

标签不识别：Unknown HTML tag中加入标签名  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70 1]  
附标签名：

view,image,text,cover-image,cover-view,scroll-view,swiper,swiper-item,checkbox-group,picker-view,picker,picker-view-column,radio-group,switch,web-view,progress,rich-text,icon,slider,navigator,image,button

附标签属性：（可以根据自己喜好多加一些，这里只有button用的很多）

open-type,mode,form-type

## 三、eslint ##

已经支持vue的eslint,最严格的模式(eslint:recommended && vue/recommended)

具体要求见

vue的lint https://vuejs.github.io/eslint-plugin-vue/rules/

eslint官方推荐的lint https://cn.eslint.org/docs/rules/

使配置文件生效（鼠标要放在.eslintrc.js文件上）  
.eslintrc.js文件

module.exports = {
      env: {
        browser: true,
        es6: true
      },
      extends: [
        'plugin:vue/essential',
        'standard'
      ],
      globals: {
        uni:'readonly',
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly'
      },
      parserOptions: {
        ecmaVersion: 2018
      },
      plugins: [
        'vue'
      ],
      rules: {
        'camelcase': 0,
      }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70 7]

## 四、资源引入 ##

可以不用相对路径，支持别名  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70 8]

/**
     * 由于 Vue CLI 3 不再使用传统的 webpack 配置文件，故 WebStorm 无法识别别名
     * 本文件对项目无任何作用，仅作为 WebStorm 识别别名用
     * 进入 WebStorm preferences -> Language & Framework -> JavaScript -> Webpack，选择这个文件即可
     *
     * */
    const resolve = dir => require('path').join(__dirname, dir)
    module.exports = { 
      resolve: { 
        alias: { 
          '@': resolve('')
        }
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70]: /images/20230528/4528cd90beaa4426984dd49d5f8ea590.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70 1]: /images/20230528/de527e9561024e37b7ccbf1c5f2c3c03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70 2]: /images/20230528/277a31c0e623417a83a6c5ff336eacc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70 3]: /images/20230528/f98bb7ecb3b148b59d4e7ddd46d0eef1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70 4]: /images/20230528/50159298caf743689bdd80734ff8f992.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70 5]: /images/20230528/6e60f61665644e4399ba4886681bc842.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70 6]: /images/20230528/e9899ff5ca74497a9a0b86bcb50fab9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70 7]: /images/20230528/bab5d4d8bae74d3aabdb79c1e7271020.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3Mjk5NQ_size_16_color_FFFFFF_t_70 8]: /images/20230528/1f9cc3ec5c4949319d38a5d9cc8892c9.png