VUE 配置vscode关于vue插件以及一些常用配置

前言：最近在搞vue项目，所谓  工欲善其事，必先利其器，下面我来配置下常用的vue插件

 

1、vetur

　　可以将“.vue”文件中的语法进行高亮显示，Vetur不仅支持Vue中的template模板以外，还支持大多数主流的前端开发脚本和插件，比如Sass、TypeScript、Jade和Less等等。

 

2、Chinese (Simplified) Language Pack for Visual Studio Code

　　汉化的vscode插件

 

3、Beautify

　　格式化代码，可以设置4空格缩进，安装后，点击 文件 -> 首选项 -> 设置 ， 然后点击右上角的  打开设置（json）,加入下面配置即可

　　格式化代码的快捷键：shift + Alt + F

　　

{

    "beautify.config": {

        "indent_size": 4

    },

    "beautify.language": {

        "js": {

            "type": [

                "javascript",

                "json"

            ],

            "filename": [

                ".jshintrc",

                ".jsbeautify"

            ]

        },

        "css": [

            "css",

            "scss"

        ],

        "html": [

            "htm",

            "html",

            "vue" //在这里加上vue，beautify插件默认不格式vue文件

        ]

    },

    "workbench.colorTheme": "Default Dark+",

    "editor.detectIndentation": false,

    "[vue]": {

        "editor.defaultFormatter": "HookyQR.beautify" // 设置默认beautity为格式化

    }

}

 4、根目录下新建jsconfig.json

作用：提高在写项目时舒适度的，解决在使用@下面用法import时导致Ctrl键+左键无法跳转，还可以提高vscode性能

import { getAsyncRoutes } from '@/api/login' // @作用是用 @ 代替 项目中 src目录，我们在 src 目录下 找 components 就简单多了

下面是一些基本配置

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            // 解决项目中使用@作为路径别名，导致vscode无法跳转文件的问题
            "@/*": ["src/*"]
        },
        // 解决prettier对于装饰器语法的警告
        "experimentalDecorators": true,
        // 解决.jsx文件无法快速跳转的问题
        "jsx": "preserve"
    },
    //提高 IDE 性能
    "exclude": ["node_modules", "dist", "build"]
}

compilerOptions配置如下

 5、配置代理请求API

 我是用的vite，在vite.config.js中加入如下代码

server: {
    port: 5173, // 本地前端端口
    proxy: {
      // 选项写法
      '/api': {
        target: 'http://xxxxx.com:80', // 这里填要请求的api
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '') // 将api替换成空
      }
    },
    hmr: {
      overlay: false
    },
    host: '0.0.0.0'
  }