vscode美化js代碼（代碼編輯器vscode）

本文目錄一覽：

• 1、vscode基本代碼
• 2、vscode中 輸入js語句，顏色是白色的？
• 3、vscode怎麼格式化js中的json數據?

vscode基本代碼

在命令行輸入 npm -v 出現了node 版本號 即安裝成功

新建一個package文件 npm init 輸入對應的內容

全部採取默認方式命令 npm init -y

安裝依賴 npm install jquery 默認放在生產環境下的

生產環境是軟件上線的時候需要用到的依賴包

npm i bootstrap –save

npm i bootstrap -S

開發環境是軟件開發的時候需要用到的依賴包

npm i bootstrap –save-dev

npm i bootstrap -D

npm i 包 默認是最新的版本

^ 表示你以後npm i 會自動升級中版本 小版本 不會升級大版本

npm i 表示自動安裝package包裡面所有依賴文件

如果想固定版本 可以前面什麼都不加 例如：”vue”: “2.5.11”

卸載依賴包 npm uninstall vue

簡寫 npm uni vue 或者 npm un vue 或者 npm unin vue

或者 npm unins vue

安裝固定版本的vue npm i vue@2.5.11

安裝固定的大版本的vue 會自動把中版本和小版本升級到最高

npm i vue@2

vscode中 輸入js語句，顏色是白色的？

很明顯文件格式不對，從截圖來看代碼外麵包了script標籤，猜測代碼應該是放在.html文件中的。但如果這時候把文件格式指定為“Javascript”就會出現截圖的樣子。

反之，如果把文件格式指定為“HTML”，JS代碼恢復彩色高亮。

有圖有真相！

修改文件編碼

希望能解決你的問題，如有疑問，歡迎追問。

vscode怎麼格式化js中的json數據?

1、vs code安裝插件eslint

2、文件 – 首選項 – 設置 – json配置

3、粘貼以下JSON配置，保存

{

// vscode默認啟用了根據文件類型自動設置tabsize的選項

“editor.detectIndentation”: false,

// 重新設定tabsize

“editor.tabSize”: 2,

// #每次保存的時候自動格式化

“editor.formatOnSave”: true,

// #每次保存的時候將代碼按eslint格式進行修復

“eslint.autoFixOnSave”: true,

// 添加 vue 支持

“eslint.validate”: [

“javascript”,

“javascriptreact”,

{

“language”: “vue”,

“autoFix”: true

}

],

// #讓prettier使用eslint的代碼格式進行校驗

“prettier.eslintIntegration”: true,

// #去掉代碼結尾的分號

“prettier.semi”: false,

// #使用帶引號替代雙引號

“prettier.singleQuote”: true,

// #讓函數(名)和後面的括號之間加個空格

“javascript.format.insertSpaceBeforeFunctionParenthesis”: true,

// #這個按用戶自身習慣選擇

“vetur.format.defaultFormatter.html”: “js-beautify-html”,

// #讓vue中的js按編輯器自帶的ts格式進行格式化

“vetur.format.defaultFormatter.js”: “vscode-typescript”,

“vetur.format.defaultFormatterOptions”: {

“js-beautify-html”: {

“wrap_attributes”: “aligned-multiple”

},

“prettyhtml”: {

“printWidth”: 100,

“singleQuote”: false,

“wrapAttributes”: false,

“sortAttributes”: false

}

},

// 格式化stylus, 需安裝Manta’s Stylus Supremacy插件

“stylusSupremacy.insertColons”: false, // 是否插入冒號

“stylusSupremacy.insertSemicolons”: false, // 是否插入分好

“stylusSupremacy.insertBraces”: false, // 是否插入大括號

“stylusSupremacy.insertNewLineAroundImports”: false, // import之後是否換行

“stylusSupremacy.insertNewLineAroundBlocks”: false,

“window.zoomLevel”: 0,

“[javascript]”: {

“editor.defaultFormatter”: “vscode.typescript-language-features”

}}