資訊專欄INFORMATION COLUMN
摘要：基礎(chǔ)開發(fā)插件圖標美化調(diào)試代碼格式化代碼格式化代碼規(guī)范語法提示必備及相關(guān)技術(shù)棧語法提示文件高亮格式化編碼支持自動閉合標簽自動更改對應(yīng)標簽名自動補全路徑本地項目管理右擊在瀏覽器打開文件支持支持友好化配置基礎(chǔ)設(shè)置設(shè)置設(shè)置設(shè)置設(shè)置設(shè)置配
1. vscode基礎(chǔ)開發(fā)插件
vscode-icons 圖標美化 Debugger for Chrome 調(diào)試 Beautify 代碼格式化 Prettier 代碼格式化 ESLint 代碼規(guī)范 JavaScript (ES6) code snippets javascript語法提示 vetur vue必備 VueHelper vue及相關(guān)技術(shù)棧語法提示 Sass sass文件高亮&格式化 Stylus language stylus編碼支持 Auto Close Tag 自動閉合標簽 Auto Rename Tag 自動更改對應(yīng)標簽名 Path Autocomplete 自動補全路徑 Git Lens 本地項目git管理 View in Browser 右擊在瀏覽器打開文件 Markdown All in One markdown支持 Npm npm支持 Npm Intellisense npm友好化2. 配置vscode settings.json
{
// 基礎(chǔ)設(shè)置
"editor.tabSize": 2,
"workbench.iconTheme": "vscode-icons",
"workbench.startupEditor": "welcomePage",
"editor.quickSuggestions": {
"strings": true
},
// vue設(shè)置
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"files.associations": {
"*.vue": "vue"
},
// vetur設(shè)置
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
// eslint設(shè)置
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
// format設(shè)置
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
"prettier.singleQuote": true,
"prettier.semi": false,
"prettier.useTabs": true,
// git設(shè)置
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false,
"suppressUpdateNotice": false,
"suppressWelcomeNotice": true
}
}
3. ESLint配置文件
（1）eslint --init 然后選擇自己的代碼風(fēng)格（當(dāng)然，上面的配置與選擇項對應(yīng)修改）
（2）按照cube-ui的代碼風(fēng)格設(shè)定（推薦）
工程中.eslintrc.js文件
module.exports = {
root: true,
parser: "babel-eslint",
parserOptions: {
sourceType: "module"
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: "standard",
// required to lint *.vue files
plugins: [
"html"
],
// add your custom rules here
"rules": {
// allow paren-less arrow functions
"arrow-parens": 0,
// allow async-await
"generator-star-spacing": 0,
// allow debugger during development
"no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
"no-tabs": 0,
"space-before-function-paren": 0
}
}
點擊查看standard類型配置項
點擊查看ESLint規(guī)則說明
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90397.html
摘要：前言記錄自己從基礎(chǔ)學(xué)習(xí)實戰(zhàn)，初入發(fā)表文章，望各位大佬口下留情不對之處還請大佬指點一下。在加載完后，你自己默認的瀏覽器自動打開配置界面新建項目。 1. 前言 記錄自己從基礎(chǔ)學(xué)習(xí)vue實戰(zhàn)，初入發(fā)表文章，望各位大佬口下留情！不對之處還請大佬指點一下。 2. 新建，配置項目 1. 新建Vue-cli3.0腳手架的項目 在這里普及一下，什么是Vue-cli？ Vue是一套用于構(gòu)建用戶界面的漸...
摘要：前言記錄自己從基礎(chǔ)學(xué)習(xí)實戰(zhàn)，初入發(fā)表文章，望各位大佬口下留情不對之處還請大佬指點一下。在加載完后，你自己默認的瀏覽器自動打開配置界面新建項目。 1. 前言 記錄自己從基礎(chǔ)學(xué)習(xí)vue實戰(zhàn)，初入發(fā)表文章，望各位大佬口下留情！不對之處還請大佬指點一下。 2. 新建，配置項目 1. 新建Vue-cli3.0腳手架的項目 在這里普及一下，什么是Vue-cli？ Vue是一套用于構(gòu)建用戶界面的漸...
摘要：這個問題應(yīng)該是百度或者知乎都能知道答案的，以上是自己親身學(xué)習(xí)的一些途徑方便少走一點彎路入門。 問題1：前端的學(xué)習(xí)路線 基礎(chǔ)的html，css，js，推薦慕課網(wǎng)免費課程:前端工程師路徑,極客學(xué)院免費課程:前端工程師路徑 大概刷過就可以了，不用死記硬背某個知識點，css跟js還需要加深學(xué)習(xí)的，在實戰(zhàn)過程中不懂就去查文檔 基礎(chǔ)的ps切圖能力 慕課網(wǎng)ps基礎(chǔ)課程 擁有自己的虛擬主機 傳送...
閱讀 2489·2021-11-24 09:39
閱讀 3531·2019-08-30 15:53
閱讀 606·2019-08-29 15:15
閱讀 2912·2019-08-26 13:23
閱讀 3227·2019-08-26 10:48
閱讀 653·2019-08-26 10:31
閱讀 779·2019-08-26 10:30
閱讀 2372·2019-08-23 18:32
