總的來說需要兩個東西:
- node.js
- VScode(可替代的有很多,Hbuilder、webstorm、sublime等都行)
- cnpm(可選,爲了快一點)
第一步 node.js安裝
選擇自己需要的安裝就好,這裏拿windows舉例
下載安裝即可,中途勾選上add to path就好。
安裝好後,檢查一下Node是否安裝成功
第二步 npm安裝與配置
新版的node.js 自帶有npm,所以這一步C盤空間大且不在乎的可以省略。
自定義npm全局路徑
- 到nodejs安裝目錄新建node_cache 和 node_global兩個文件夾
-
cmd 執行以下命令(目錄以你麼自己的爲準)
npm config set prefix "G:\nodejs\node_global" npm config set cache "G:\nodejs\node_cache"
-
配置環境變量
修改用戶變量的Path中帶\AppData\Roaming\npm的那個
- cmd下 npm install -g vue-cli 安裝一下vue腳手架,看看是不是在你node目錄下生成,是的話就搭建成功了。
第三步 VScode準備
-
中文設置
- 安裝這個插件
- 【ctrl+shift+p】
然後重啓Vscode就好
-
html代碼格式化
- 先下載兩個插件(和上面裝中文插件那樣)
- ESlint
- vetur
- 文件–>首選項–>設置
- 先下載兩個插件(和上面裝中文插件那樣)
添加以下代碼
{
// 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": "force-aligned"
// #vue組件中html代碼格式化樣式
}
}
}
之後就能【alt+shift+f】格式化html代碼了