下載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
三、安裝VScode
VSCode一款免費(fèi)開源的現(xiàn)代化輕量級代碼編輯器谱秽，前端開發(fā)一大利器洽蛀。
vscode官網(wǎng)下載地址:https://code.visualstudio.com/
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ā)者必備鲫寄。
2.vscode-icons
資源目錄加上圖標(biāo)，增加不同文件類型辨識度疯淫，必備
3.Beautify
代碼格式化
4.Auto Close Tag
自動閉合HTML標(biāo)簽
5.ESLint
javascript代碼檢測工具地来，可以配置每次保存時(shí)格式化js，但每次保存只格式化一點(diǎn)點(diǎn)熙掺，得連續(xù)按住Ctrl+s才可以
6.Prettier - Code formatter
只關(guān)注格式化未斑，并不具有eslint檢查語法等能力，只關(guān)心格式化文件(最大長度币绩、混合標(biāo)簽和空格蜡秽、引用樣式等)，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown
7.minapp
支持微信小程序標(biāo)簽缆镣、屬性的智能補(bǔ)全
8.GitLens
可以查看代碼提交記錄
9.Code Runner
可以單獨(dú)運(yùn)行JS文件芽突，在JS代碼頁面鼠標(biāo)右鍵點(diǎn)擊Run Code，即可輸出JS運(yùn)行結(jié)果
10.Easy LESS
平時(shí)開發(fā)寫css比較麻煩董瞻，可以安裝此插件寞蚌，在目錄中新建less文件進(jìn)行開發(fā)，保存的時(shí)候自動回生成一個(gè)同名css文件钠糊，這樣開發(fā)就方便多了睬澡，記得html引用的時(shí)候要引用css文件
11.cssrem
點(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
可以自動根據(jù)px計(jì)算出對應(yīng)的rem值，安裝完此插件啄糙，及得重啟vscode笛臣！否則不生效！
【后續(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ù)先定義的代碼片段了
注意：此處配置了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 的代碼格式化
