vscode中的 jsconfig.json

genedna 發布于2019-08-23 14:57 / 1429人閱讀

摘要：使用屬性屬性模式告訴語言服務哪些文件是什么文件，而不是源代碼的一部分。這些文件會導致建議顯示兩次，并會降低的速度。例如，對于別名或然后使用別名或最佳實踐只要有可能，您應該使用不屬于項目源代碼的文件排除文件夾。值為，，，，，顯示診斷信息。

問題源頭：webpack模板里import路徑中@符號是什么意思？

什么是jsconfig.json？

目錄中存在jsconfig.json文件表示該目錄是JavaScript項目的根目錄。jsconfig.json文件指定根文件和JavaScript語言服務提供的功能選項。

提示：如果您不使用JavaScript，則無需擔心jsconfig.json。
提示：jsconfig.json源于tsconfig.json，是TypeScript的配置文件。jsconfig.json相當于tsconfig.json的“allowJs”屬性設置為true。

為什么我需要一個jsconfig.json文件？

Visual Studio Code的JavaScript支持可以在兩種不同的模式下運行：

文件范圍 - 沒有jsconfig.json：在此模式下，在Visual Studio Code中打開的JavaScript文件被視為獨立單元。只要文件a.js沒有顯式引用文件b.ts（使用///引用指令或CommonJS模塊），兩個文件之間就沒有共同的項目上下文。

顯式項目 - 使用jsconfig.json：JavaScript項目是通過jsconfig.json文件定義的。目錄中存在此類文件表示該目錄是JavaScript項目的根目錄。文件本身可以選擇列出屬于項目的文件，要從項目中排除的文件，以及編譯器選項（見下文）。

當您在工作空間中有一個定義項目上下文的jsconfig.json文件時，JavaScript體驗會得到改進。因此，當您在新工作空間中打開JavaScript文件時，我們提供了一個創建jsconfig.json文件的提示。

jsconfig.json的位置

我們通過創建jsconfig.json文件將我們代碼的這一部分（我們網站的客戶端）定義為JavaScript項目。將文件放在JavaScript代碼的根目錄下，如下所示。

在更復雜的項目中，您可能在工作空間中定義了多個jsconfig.json文件。您將需要執行此操作，以便不將一個項目中的代碼建議為IntelliSense以在另一個項目中進行編碼。下面的插圖是一個帶有客戶端和服務器文件夾的項目，顯示了兩個多帶帶的JavaScript項目。

例子

默認情況下，JavaScript語言服務將分析并為JavaScript項目中的所有文件提供IntelliSense^{(智能感知)}。您需要指定要排除或包含的文件，以便提供正確的IntelliSense。

使用“exclude”屬性

exclude屬性（glob模式）告訴語言服務哪些文件是什么文件，而不是源代碼的一部分。這使性能保持在較高水平。如果IntelliSense速度很慢，請將文件夾添加到排除列表中（如果檢測到速度減慢，VS代碼將提示您執行此操作）。

{
    "compilerOptions": {
        "target": "es6"
    },
    "exclude": [
        "node_modules"
    ]
}

提示：您將要排除由構建過程生成的文件（例如，dist目錄）。 這些文件會導致建議顯示兩次，并會降低IntelliSense的速度。

使用“包含”屬性

或者，可以使用include屬性（glob模式）顯式設置項目中的文件。如果不存在include屬性，則默認為包含目錄和子目錄中的所有文件。如果指定了include屬性，則只包括這些文件。下面是一個具有顯式include屬性的示例。

{
    "compilerOptions": {
        "target": "es6"
    },
    "include": [
        "src/**/*"
    ]
}

提示：exclude和include中的文件路徑是相對于jsconfig.json的位置。

jsconfig選項

下面是jsconfig“compilerOptions”來配置JavaScript語言支持。

提示：不要被compilerOptions混淆。 此屬性的存在是因為jsconfig.json是tsconfig.json的后代，后者用于編譯TypeScript。

選項	描述	類型	默認
noLib	不包含默認庫文件（lib.d.ts）	string	-
target	指定要使用的默認庫（lib.d.ts）。值是“es3”，“es5”，“es6”，“es2015”，“es2016”，“es2017”，“es2018”，“esnext”。	string	-
checkJs	啟用JavaScript文件的類型檢查。	boolean	true
experimentalDecorators	為擬議的ES裝飾器提供實驗支持。	string	-
allowSyntheticDefaultImports	允許從沒有默認導出的模塊進行默認導入。這不會影響代碼發出，只會影響類型檢查。	boolean	true
baseUrl	用于解析非相對模塊名稱的基目錄。	string	-
paths	指定相對于baseUrl選項計算的路徑映射。	object	見demo

使用webpack別名

要使IntelliSense使用webpack別名，您需要使用glob模式指定paths鍵。
例如，對于別名"ClientApp"_(或@)：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "ClientApp/*": ["./ClientApp/*"]
    }
  }
}

然后使用別名

import Something from "ClientApp/foo"
// 或 import Something from "@/foo"

最佳實踐

只要有可能，您應該使用不屬于項目源代碼的JavaScript文件排除文件夾。

提示：如果工作空間中沒有jsconfig.json，則默認情況下，VS Code將排除node_modules文件夾。

下面是一個將常見項目組件映射到其安裝文件夾的表，建議將其排除在外：

組件	要排除的文件夾
node	排除node_modules文件夾
webpack, webpack-dev-server	排除內容文件夾，例如dist。
bower	排除bower_components文件夾
ember	排除tmp和temp文件夾
jspm	排除jspm_packages文件夾

當您的JavaScript項目變得太大而性能變慢時，通常是因為像node_modules這樣的庫文件夾。如果VS Code檢測到您的項目變得過大，則會提示您編輯排除列表。

提示：有時無法正確選擇更改配置，例如添加或編輯jsconfig.json文件。 運行Reload JavaScript Project命令應重新加載項目并獲取更改。

使用TypeScript編譯器進行低級編譯

當tsc用于將ES6 JavaScript向下級編譯為舊版本時，jsconfig.json中的以下編譯器選項適用：

選項	描述
module	指定模塊代碼生成。值為“commonjs”，“system”，“umd”，“amd”，“es6”，“es2015”
diagnostics	顯示診斷信息。
emitBOM	在輸出文件的開頭發出UTF-8字節順序標記（BOM）。
inlineSourceMap	使用源映射發出單個文件，而不是使用多帶帶的文件。
inlineSources	在單個文件中將源與源圖一起發出; 需要設置--inlineSourceMap。
jsx	指定JSX代碼生成：“保留”或“反應”^?。
reactNamespace	指定在針對"react"JSX發出的目標時為createElement和__spread調用的對象。
mapRoot	將位置指定為字符串中的uri，其中調試器應該找到映射文件而不是生成的位置。
noEmit	不發起輸出。
noEmitHelpers	不在編譯輸出中生成自定義輔助函數，如__extends。
noEmitOnError	如果報告任何類型檢查錯誤，不發起輸出。
noResolve	不將三斜杠引用或模塊導入目標解析為輸入文件。
outFile	連接并將輸出發送到單個文件。
outDir	將輸出結構重定向到目錄。
removeComments	不向輸出發出注釋。
rootDir	指定輸入文件的根目錄。用于通過--outDir控制輸出目錄結構。
sourceMap	生成相應的".map"文件。
sourceRoot	指定調試器應該找到JavaScript文件而不是源位置的位置。
stripInternal	不為具有"@internal"注釋的代碼發出聲明。
watch	監聽輸入文件。
emitDecoratorMetadata	在源中為裝飾聲明發出設計類型元數據。
noImplicitUseStrict	不在模塊輸出中發出“use strict”指令。

這個文檔有用么？

參考：
JavaScript語言服務
TypeScript tsconfig.json
glob模式
glob (programming))
webpack模板里import路徑中@符號是什么意思？

翻譯：Xindot
原文：https://code.visualstudio.com...

GPU云服務器云服務器 vscode vscode webrtc vscode asp 阿里云服務器vscode

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101393.html

不再手寫import - VSCode自動引入Vue組件和Js模塊

摘要：如要自動引入組件，首先需安裝拓展自動引入組件和普通模塊在根目錄添加。使用自動引入中的安裝拓展配置輸入命令后選擇引入包其他自動引入組件和模塊后，按住點擊路徑可直接跳到該文件文章原始發布于我的博客如要自動引入Vue組件，首先需安裝VSCode拓展： Vetur 自動引入Vue組件和普通Js模塊在根目錄添加 jsconfig.json 。每次修改jsconfig.json后需重啟該V...

LiuRhoRamen 2019-08-22 18:49 評論0 收藏0
介紹vue項目中jsconfig.json概念及使用步驟

　先為大家介紹在vue項目中 jsconfig.json　　官方說明：當您在工作空間中有一個定義項目上下文的jsconfig.json文件時，JavaScript體驗會得到改進。　　概述　　目錄中存在tsconfig.json文件表明該目錄是 TypeScript 項目的根目錄。該tsconfig.json文件指定編譯項目所需的根文件和編譯器選項。　　JavaScript 項目可以使用jscon...

3403771864 2023-01-02 11:07 評論0 收藏0
我的VS CODE

摘要：對文件提供語法高亮和自動補全對小程序文件提供補全和語法高亮只需要鍵入就會有微信的提示使用做路徑感知當我們在項目中集成的時候，經常會使用。在日常開發中，我使用的編輯器是 VS CODE。不僅界面簡潔好看，而且插件豐富，是前端開發的首選工具之一。這些插件和工具的目的是為了提高我們的開發效率，下面就我日常開發切身使用到和感受到有幫助的插件和方法做個總結。 VS CODE 常用的個人在用的插...

X1nFLY 2019-08-26 13:29 評論0 收藏0
[譯] 幫你高效使用 VS Code 的秘訣

摘要：當你處于文件管理器中，你可以像在的中那樣用相同的快捷鍵進行常規操作，比如用方向鍵導航用鍵給文件或文件夾重命名用打開當前文件等。原文地址：Tips to use VSCode more efficiently 原文作者：sudolabs 譯文出自：掘金翻譯計劃本文永久鏈接：github.com/xitu/gold-m… 譯者：Baddyo 校對者：xionglong58, hzdaqo ...

cgspine 2019-05-23 17:35 評論0 收藏0
解決JS文件引用路徑多層查找

摘要：但是在下編輯有點問題智能路徑提示不能用了解決方案添加定位模塊解決方案使用插件然后使用相當于一問題路徑結構 0 0-1 0-1-0 0-1-2 0-1-2-0 0-1-2-0-0 0-2 0-2-0 如過0-1-2-0-0里面的文件引用0-2-0里面的文件：（1）相對路徑寫法 ....

羅志環 2019-08-23 12:18 評論0 收藏0