vscode
下載地址： vscode https://marketplace.visualstudio.com/VSCode
vscode 插件支持
http://www.reibang.com/p/e822b88475e7
配置 ESLint （需安裝 Prettier - Code formatter 插件）
打開用戶設(shè)置文件
// vscode默認(rèn)啟用了根據(jù)文件類型自動(dòng)設(shè)置tabsize的選項(xiàng)
"editor.detectIndentation": false,
// 重新設(shè)定tabsize
"editor.tabSize": 2,
// #每次保存的時(shí)候自動(dòng)格式化
"editor.formatOnSave": true,
// #每次保存的時(shí)候?qū)⒋a按eslint格式進(jìn)行修復(fù)
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn)
"prettier.eslintIntegration": true,
// #去掉代碼結(jié)尾的分號(hào)
"prettier.semi": false,
// #使用帶引號(hào)替代雙引號(hào)
"prettier.singleQuote": true,
// #讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #這個(gè)按用戶自身習(xí)慣選擇
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue組件中html代碼格式化樣式
}
}
保存代碼自動(dòng)按照eslint格式化藏畅，一應(yīng)俱全
斷點(diǎn)調(diào)試 （需安裝Debugger for Chrome）
官網(wǎng)推薦 https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html
- 在瀏覽器中展示源碼
如果你使用的是 Vue CLI 2绘梦，請(qǐng)?jiān)O(shè)置并更新 config/index.js 內(nèi)的 devtool 屬性：
devtool: 'source-map',
如果你使用的是 Vue CLI 3开泽，請(qǐng)?jiān)O(shè)置并更新 vue.config.js 內(nèi)的 devtool 屬性：
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
- 在vscode中
點(diǎn)擊在 Activity Bar 里的 Debugger 圖標(biāo)來(lái)到 Debug 視圖狼犯，然后點(diǎn)擊那個(gè)齒輪圖標(biāo)來(lái)配置一個(gè) launch.json 的文件，選擇 Chrome/Firefox: Launch 環(huán)境。然后將生成的 launch.json 的內(nèi)容替換成為相應(yīng)的配置：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
{
"type": "firefox",
"request": "launch",
"name": "vuejs: firefox",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
}
]
}
web 前端群招人获枝，有夢(mèng)想的一群小青年 http://www.reibang.com/p/33eee1c26b8a
