前端工具VScode+NodeJs+Git下載配置

下載vscode需要用到node.js和git

一啦桌、安裝NodeJs

1.下載Nodejs

Node.js官網(wǎng)下載地址:https://nodejs.org/en/download/
Node.js歷史版本下載地址:https://nodejs.org/zh-cn/download/releases/

tips:腳本語言需要一個(gè)解析器才能運(yùn)行,JavaScript是腳本語言及皂,在不同的位置有不一樣的解析器甫男,如寫入html的js語言,瀏覽器是它的解析器角色验烧。而對于需要獨(dú)立運(yùn)行的JS板驳,nodejs就是一個(gè)解析器。

2.安裝

安裝的時(shí)候除了安裝的路徑修改為非系統(tǒng)盤外碍拆,其他默認(rèn)若治。我安裝到D:\Program Files\nodejs,默認(rèn)情況下會安裝npm(Node Package Manager)感混,是一個(gè)項(xiàng)目依賴庫的管理工具端幼。

3.檢測是否安裝成功

打開命令行或者在vscode里“終端\新建終端”,在終端輸入命令

node -v     //會輸出當(dāng)前node的安裝版本
npm -v      //會輸出當(dāng)前npm的安裝版本

二浩习、安裝Git

實(shí)際項(xiàng)目開發(fā)中静暂,我們經(jīng)常會用一些版本控制器來托管自己的代碼

git官網(wǎng)下載地址:https://git-scm.com/downloads

可視化代碼提交工具(小章魚)
GitKraken 客戶端:https://www.gitkraken.com/download

多分支提交步驟:

1.個(gè)人分支commit(push)
2.切換到master主分支pull
3.主分支meger到個(gè)人分支(如果沒有錯誤)
4.個(gè)人分支meger到主分支
5.主分支push

Git常用命令和常見問題

三、安裝VScode

VSCode一款免費(fèi)開源的現(xiàn)代化輕量級代碼編輯器谱秽,前端開發(fā)一大利器洽蛀。

vscode官網(wǎng)下載地址:https://code.visualstudio.com/

官網(wǎng)下載
1.設(shè)置中文語言

-使用快捷鍵【Ctrl+Shift+P】摹迷,彈出的搜索框中輸入【configure language】
-然后選擇搜索出來的【Configure Display Language】,locale的屬性值為“zh-CN”
-安裝插件名為【Chinese (Simplified)Language Pack for Visual Studio Code】
-重啟VSCode軟件生效郊供。

2.插件列表

1.Vetur
Vue多功能集成插件峡碉,包括:語法高亮,智能提示驮审,Vue開發(fā)者必備鲫寄。

image.png

2.vscode-icons
資源目錄加上圖標(biāo),增加不同文件類型辨識度疯淫,必備

image.png

3.Beautify
代碼格式化

image.png

4.Auto Close Tag
自動閉合HTML標(biāo)簽

image.png

5.ESLint
javascript代碼檢測工具地来,可以配置每次保存時(shí)格式化js,但每次保存只格式化一點(diǎn)點(diǎn)熙掺,得連續(xù)按住Ctrl+s才可以

image.png

6.Prettier - Code formatter
只關(guān)注格式化未斑,并不具有eslint檢查語法等能力,只關(guān)心格式化文件(最大長度币绩、混合標(biāo)簽和空格蜡秽、引用樣式等),包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown

image.png

7.minapp
支持微信小程序標(biāo)簽缆镣、屬性的智能補(bǔ)全

image.png

8.GitLens
可以查看代碼提交記錄

image.png
image.png

9.Code Runner
可以單獨(dú)運(yùn)行JS文件芽突,在JS代碼頁面鼠標(biāo)右鍵點(diǎn)擊Run Code,即可輸出JS運(yùn)行結(jié)果

image.png

10.Easy LESS
平時(shí)開發(fā)寫css比較麻煩董瞻,可以安裝此插件寞蚌,在目錄中新建less文件進(jìn)行開發(fā),保存的時(shí)候自動回生成一個(gè)同名css文件钠糊,這樣開發(fā)就方便多了睬澡,記得html引用的時(shí)候要引用css文件

image.png

11.cssrem

image.png

點(diǎn)擊圖示按鈕孕暇,選擇配置拓展設(shè)置锅减,然后在Root Font Size設(shè)置基礎(chǔ)值.例如ui設(shè)計(jì)圖為750px宠纯,想要使用 vw將頁面100等分,則1px=0.133rem(100/750)逝慧,在使用的時(shí)候?qū)?code>10px時(shí)則會自動計(jì)算出1.3rem

image.png

可以自動根據(jù)px計(jì)算出對應(yīng)的rem值,安裝完此插件啄糙,及得重啟vscode笛臣!否則不生效!


image.png

【后續(xù)繼續(xù)補(bǔ)充插件】

3.創(chuàng)建用戶代碼片段(vue)

文件—>首選項(xiàng)—>用戶代碼片段, 然后再彈出的輸入框中輸入vue隧饼,然后回車(Enter)
在vue.json中寫上代碼片段,代碼如下

{
    "vue-template": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div class='${TM_FILENAME_BASE}'>",
            "  </div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "  name: '',",
            "  data () {",
            "    return {",
            "    }",
            "  },",
            "  created () { // 實(shí)例被創(chuàng)建之后執(zhí)行代碼",
            "",
            "\t},",
            "  computed: { // 計(jì)算屬性",
            "",
            "\t},",
            "  components: { // 組件的引用",
            "",
            "\t},",
            "  methods: { // 方法",
            "",
            "\t},",
            "  mounted () { // 頁面進(jìn)入時(shí)加載內(nèi)容",
            "",
            "\t},",
            "  watch: { // 監(jiān)測變化",
            "",
            "\t}",
            "}",
            "</script>",
            "",
            "<style scoped lang='scss'>",
            "",
            "</style>"
        ],
        "description": "my vue template"
    }
}

使用的時(shí)候輸入vue沈堡,會自動提示,按下回車鍵就可以快速生成預(yù)先定義的代碼片段了


預(yù)先定義的vue代碼片段

注意:此處配置了sass燕雁,所以在style中定義了lang=‘scss’诞丽,要是不使用scss鲸拥,可以在vue.json文件中去掉即可。
vue項(xiàng)目sass-loader安裝可參考:vue項(xiàng)目sass-loader安裝
用戶代碼片段可參考好基友文章:使用vs code創(chuàng)建vue/html5-vue代碼片段

4.1settings.json中配置(一)(配置用戶代碼片段時(shí)也可以使用)
{
    "update.mode": "manual",
    "editor.formatOnSave": true,  // #每次保存的時(shí)候是否自動格式化 
    "editor.fontSize": 14,
    "editor.fontFamily": "Consolas, 'Courier New', monospace",
    "editor.fontWeight": "bold",
    "editor.lineHeight": 18,
    "editor.letterSpacing": 0,
    "editor.tabSize": 2,   // 重新設(shè)定tabsize
    "editor.insertSpaces": true,
    "editor.detectIndentation": true,
    "editor.wordWrap": "on",
    "editor.renderLineHighlight": "gutter",
    "editor.roundedSelection": true,
    "editor.renderControlCharacters": true,
    "editor.renderIndentGuides": true,
    "editor.dragAndDrop": false,
    "editor.minimap.showSlider": "mouseover",
    "editor.minimap.renderCharacters": false,
    "editor.minimap.maxColumn": 90,
    "editor.cursorStyle": "line-thin",
    "editor.cursorBlinking": "expand",
    "editor.quickSuggestions": {
        "strings": true
    },
    "window.titleBarStyle": "native",
    "window.menuBarVisibility": "visible",
    "window.zoomLevel": 0,
    "window.title": "${rootName} - ${dirty}${activeEditorLong}",
    "workbench.colorTheme": "Monokai",
    "workbench.startupEditor": "welcomePage",
    "workbench.activityBar.visible": true,
    "workbench.statusBar.visible": true,
    "workbench.sideBar.location": "left",
    "workbench.editor.enablePreview": false,
    "workbench.editor.tabSizing": "fit",
    "workbench.colorCustomizations": {
        // "statusBar.background": "#333333",
        // "statusBar.foreground": "#adadad",
        "terminal.background": "#000000",
        "terminal.foreground": "#FFFFFF"
    },
    "breadcrumbs.enabled": false,
    "breadcrumbs.symbolPath": "off",
    "explorer.openEditors.visible": 0,
    "files.encoding": "utf8",
    "files.eol": "\r\n",
    "files.hotExit": "onExit",
    "files.autoSave": "off",
    "extensions.autoUpdate": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "wxml": "html"
    },
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "javascript.implicitProjectConfig.experimentalDecorators": true,
    //path
    "git.path": "D:\\Git\\bin\\git.exe",
    "terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\cmd.exe",
    //px to rem
    "px-to-rem.px-per-rem": 75,
    "px-to-rem.only-change-first-ocurrence": false,
    "px-to-rem.number-of-decimals-digits": 10,
    "px-to-rem.notify-if-no-changes": true,
    //npm-scripts
    "npm-scripts.showStartNotification": false,
    //simpleIcons
    "simpleIcons.hideArrows": false,
    //vetur
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto"   //force-aligned:保存格式化換行  auto:保存格式化不換行
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
    "search.followSymlinks": false,
    "workbench.iconTheme": "vscode-icons",
    "eslint.autoFixOnSave": true, // #每次保存的時(shí)候?qū)⒋a按eslint格式進(jìn)行修復(fù)
    "eslint.validate": [
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "javascript",
            "autoFix": true
        },
        {
            "language": "wpy",
            "autoFix": true
        }
    ],
    "prettier.eslintIntegration": true, // #讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn)
    "prettier.semi": false, //#是否顯示代碼最后一行的分號
    "prettier.singleQuote": true, //#使用單引號替代雙引號
    "editor.formatOnType": true, //#讓函數(shù)(名)和后面的括號之間加個(gè)空格
    "files.associations": {
        "*.wpy": "vue",
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    "minapp-vscode.disableAutoConfig": true,
    "vetur.validation.template": false
}
4.2 settings.json中配置(二)

注: 此配置支持 CSS僧免、HTML刑赶、JS 和 Vue 等文件的格式化。大家可以參考懂衩,然后結(jié)合自己的需求去配置撞叨。如果沒有特殊需求,也可以拿去直接用

此配置文件需要安裝以下幾個(gè)vscode 擴(kuò)展程序:ESLint 浊洞、Prettier - Code formatter牵敷、Vetur

{
  // tab 大小為2個(gè)空格
  "editor.tabSize": 2,
  // 100 列后換行
  "editor.wordWrapColumn": 100,
  // 保存時(shí)格式化
  "editor.formatOnSave": true,
  // 開啟 vscode 文件路徑導(dǎo)航
  "breadcrumbs.enabled": true,
  // prettier 設(shè)置語句末尾不加分號
  "prettier.semi": false,
  // prettier 設(shè)置強(qiáng)制單引號
  "prettier.singleQuote": true,
  // 選擇 vue 文件中 template 的格式化工具
  "vetur.format.defaultFormatter.html": "prettyhtml",
  // 顯示 markdown 中英文切換時(shí)產(chǎn)生的特殊字符
  "editor.renderControlCharacters": true,
  // 設(shè)置 eslint 保存時(shí)自動修復(fù)
  "eslint.autoFixOnSave": true,
  // eslint 檢測文件類型
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  // vetur 的自定義設(shè)置
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false
    }
  }
}

此配置參考:vscode 的代碼格式化

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市法希,隨后出現(xiàn)的幾起案子枷餐,更是在濱河造成了極大的恐慌,老刑警劉巖铁材,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件尖淘,死亡現(xiàn)場離奇詭異,居然都是意外死亡著觉,警方通過查閱死者的電腦和手機(jī)村生,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來饼丘,“玉大人趁桃,你說我怎么就攤上這事∫薷耄” “怎么了卫病?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長典徘。 經(jīng)常有香客問我蟀苛,道長,這世上最難降的妖魔是什么逮诲? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任帜平,我火速辦了婚禮,結(jié)果婚禮上梅鹦,老公的妹妹穿的比我還像新娘裆甩。我一直安慰自己,他們只是感情好齐唆,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布嗤栓。 她就那樣靜靜地躺著,像睡著了一般箍邮。 火紅的嫁衣襯著肌膚如雪茉帅。 梳的紋絲不亂的頭發(fā)上叨叙,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機(jī)與錄音担敌,去河邊找鬼摔敛。 笑死,一個(gè)胖子當(dāng)著我的面吹牛全封,可吹牛的內(nèi)容都是我干的马昙。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼刹悴,長吁一口氣:“原來是場噩夢啊……” “哼行楞!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起土匀,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤子房,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后就轧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體证杭,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年妒御,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了解愤。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡乎莉,死狀恐怖送讲,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情惋啃,我是刑警寧澤哼鬓,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站边灭,受9級特大地震影響异希,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜绒瘦,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一宠互、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧椭坚,春花似錦、人聲如沸搏色。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽频轿。三九已至垂涯,卻和暖如春烁焙,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背耕赘。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工骄蝇, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人操骡。 一個(gè)月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓九火,卻偏偏與公主長得像,于是被迫代替她去往敵國和親册招。 傳聞我的和親對象是個(gè)殘疾皇子岔激,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 一:什么是閉包?閉包的用處是掰? (1)閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)虑鼎。在本質(zhì)上,閉包就 是將函數(shù)內(nèi)部和函數(shù)外...
    xuguibin閱讀 9,640評論 1 52
  • 1.配置用戶名和郵箱: git config --global user.name "名字(英文)" git co...
    佩佩216閱讀 1,112評論 0 0
  • 1-------- 走進(jìn)前端 2-------- jQuery 3-------- CSS 4-------- A...
    依依玖玥閱讀 2,327評論 0 34
  • 常用插件 Auto Close Tag 自動添加HTML / XML關(guān)閉標(biāo)簽(必備) Auto Rename Ta...
    Moorez閱讀 7,451評論 0 42
  • 今天的南昌 風(fēng)吹得剛好 溫度低得剛好 被問起我的青春 萬般皆你 若我們不曾彼此傷害 若我們也曾留下余地 總喜歡 年...
    舊城以西y閱讀 156評論 0 1