vsCode 配置记录

目录

1. import路径提示

​ 2. 按住ctrl点击鼠标，进入指定的文件

​3. 中文包安装

4、自定义函数和文件注释

4.1 快捷键不生效的处理办法

5. scss、css、id全局提示

5.1 scss变量、函数等全局提示

​5.2 css、id全局提示

 6. 最后附上笔者vue开发过程中所有的插件

---

1. import路径提示

• 安装vscode插件path-intellisense，12步骤是找到插件，34是安装好了之后点击自定义

• 在setting.json中添加如下配置项

"path-intellisense.mappings": {
        "@": "${workspaceRoot}/devPkg" // 这里的devPkg是自己的源码路径，通常是src
    }

"path-intellisense.autoSlashAfterDirectory": true,
"path-intellisense.extensionOnImport": true,
"path-intellisense.autoTriggerNextSuggestion": true,

2. 按住ctrl点击鼠标，进入指定的文件

1. 安装Vue-peek，进入vue组件
2. 在项目根目录下创建jsconfig.json文件，蒋下面这部分配置加入

{
    "allowJs": true,
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "src/*"
            ] // src需要手动修改
        }
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

 

3. 中文包安装

• 安装插件Chinese (Simplified) Language Pack for Visual Studio Code

• 按住ctrl+shirft+p，输入language，重新设置语言

4、自定义函数和文件注释

 //文件头注释
    "fileheader.customMade": {
        "Author": "liuxin",
        "Date": "Do not edit",
        "LastEditors": "liuxin",
        "LastEditTime": "Do not edit",
        "Description": "",
    },
    //函数注释
    "fileheader.cursorMode": {
        "description": "",
        "param": "Do not Edit",
        "return": "Do not Edit",
        "Author": "liuxin"
    },

4.1 快捷键不生效的处理办法

点击 文件--首选项--键盘快捷方式 搜索 fileheader，然后把快捷键改为自己顺手的快捷键就好了。

文件头注释：fileheader       快捷键：ctrl+alt+i   

函数注释：cursortip        快捷键：ctrl+alt+t

5. scss、css、id全局提示

5.1 scss变量、函数等全局提示

如果只需要在scss文件提示相应的变量等，则安装SCSS IntelliSense即可

我这里是希望vue文件也可以提示，则安装了vue-scss-variable-scan

5.2 css、id全局提示

安装插件SCSS Everywhere

 6. 最后附上笔者vue开发过程中所有的插件