VS Code

JavaScript 配置

使用 webpack alias

针对非 TypeScript 的 JavaScript 项目，VSCode 的 IntelliSense 无法识别 Webpack 的alias，因此无法点击跳转。可在项目根目录下配置jsconfig.json来解决这个问题。详见VSCode - jsconfig.jsonopen in new window。

提示

TypeScript 项目可在tsconfig.json里进行配置。

monorepo 架构子应用里 vue 文件内 Vetur 报错

若工程的仓库采用 monorepo 架构，则该工程的目录结构如下所示：

├── apps
│   ├── appA
│   │   ├── src
│   │   │   ├── App.vue
│   │   │   └── main.ts
│   │   ├── .eslintrc.js
│   │   ├── package.json
│   │   ├── README.md
│   │   └── ...
│   ├── appB
│   └── ...
├── packages
│   ├── packageA
│   ├── packageB
│   └── ...
├── package.json
├── README.md
└── ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

若是使用 VSCode 打开 monorepo 的根目录，则在 appA 子应用里的 Vue 文件内引入（通过 Webpack 配置了别名的）模块时，Vetur 会报错：

Cannot find module '@/common/log' or its corresponding type declarations.

且无法通过 Command ⌘ 键 + 鼠标左键跳转到引入模块的文件里。

解决办法：直接使用 VSCode 打开 appA 目录，让 appA 目录成为 VSCode 窗口的根路径。

详见: vscode中vetur插件提示找不到设置了alias的模块open in new window

扩展

介绍一些 VS Code 的常用扩展，以及根据个人/团队/项目的需求作出的自定义配置。

Emmet

TODO:

ESLint

{
    // Turns auto fix on save on or off. Please note auto fix on save is only available if VS Code's files.autoSave is either off, onFocusChange or onWindowChange. It will not work with afterDelay.
    "eslint.autoFixOnSave": true,

    // An array of language ids which should be validated by ESLint
    "eslint.validate": [
        "html",
        "javascript",
        "javascriptreact",
        // You can also control which plugins should provide auto fix support. To do so simply provide an object literal in the validate setting with the properties language and autoFix instead of a simple string.
        {
            "language": "html",
            "autoFix": true
        }
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意，VS Code 的 ESLint 插件，默认会相对于工作目录来解析配置文件（比如.eslintrc/.eslintignore文件），可通过eslint.workingDirectories进行修改，但是一般不需要。

Vetur

{
    // 这些是默认值
    "vetur.format.defaultFormatter.html": "prettyhtml",
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.postcss": "prettier",
    "vetur.format.defaultFormatter.scss": "prettier",
    "vetur.format.defaultFormatter.less": "prettier",
    "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatter.ts": "prettier",

    // 这些会覆盖默认值
    "vetur.format.defaultFormatter.html": "prettier",

    // 格式化配置
    "vetur.format.options.tabSize": 4,
    "vetur.format.options.useTabs": false
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

注意，针对格式化的配置，若是本地存在配置文件（比如.prettierrc），Vetur 会优先使用本地配置文件里的配置项，详见Vetur Formatter Configopen in new window。

快速收起 node_modules

详见：一键收起 node_modules 文件夹open in new window

行内显示错误信息

详见: VSCode 插件 - Error Lensopen in new window

# VS Code

# JavaScript 配置

# 使用 webpack alias

# monorepo 架构子应用里 vue 文件内 Vetur 报错

# 扩展

# Emmet

# ESLint

# Vetur

# 快速收起 node_modules

# 行内显示错误信息