成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

工程實(shí)戰(zhàn)-vue在vscode的環(huán)境配置

solocoder / 1272人閱讀

摘要：基礎(chǔ)開發(fā)插件圖標(biāo)美化調(diào)試代碼格式化代碼格式化代碼規(guī)范語(yǔ)法提示必備及相關(guān)技術(shù)棧語(yǔ)法提示文件高亮格式化編碼支持自動(dòng)閉合標(biāo)簽自動(dòng)更改對(duì)應(yīng)標(biāo)簽名自動(dòng)補(bǔ)全路徑本地項(xiàng)目管理右擊在瀏覽器打開文件支持支持友好化配置基礎(chǔ)設(shè)置設(shè)置設(shè)置設(shè)置設(shè)置設(shè)置配

1. vscode基礎(chǔ)開發(fā)插件 
vscode-icons 圖標(biāo)美化
Debugger for Chrome 調(diào)試

Beautify 代碼格式化
Prettier 代碼格式化
ESLint 代碼規(guī)范
JavaScript (ES6) code snippets javascript語(yǔ)法提示

vetur vue必備
VueHelper vue及相關(guān)技術(shù)棧語(yǔ)法提示
Sass sass文件高亮&格式化
Stylus language stylus編碼支持

Auto Close Tag 自動(dòng)閉合標(biāo)簽
Auto Rename Tag 自動(dòng)更改對(duì)應(yīng)標(biāo)簽名
Path Autocomplete 自動(dòng)補(bǔ)全路徑

Git Lens 本地項(xiàng)目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)然，上面的配置與選擇項(xiàng)對(duì)應(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
    }
}

點(diǎn)擊查看standard類型配置項(xiàng)
點(diǎn)擊查看ESLint規(guī)則說(shuō)明

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/90397.html

相關(guān)文章

  • 記自己一次vue基礎(chǔ)實(shí)戰(zhàn)：配置篇

    摘要：前言記錄自己從基礎(chǔ)學(xué)習(xí)實(shí)戰(zhàn)，初入發(fā)表文章，望各位大佬口下留情不對(duì)之處還請(qǐng)大佬指點(diǎn)一下。在加載完后，你自己默認(rèn)的瀏覽器自動(dòng)打開配置界面新建項(xiàng)目。 1. 前言 記錄自己從基礎(chǔ)學(xué)習(xí)vue實(shí)戰(zhàn)，初入發(fā)表文章，望各位大佬口下留情！不對(duì)之處還請(qǐng)大佬指點(diǎn)一下。 2. 新建，配置項(xiàng)目 1. 新建Vue-cli3.0腳手架的項(xiàng)目 在這里普及一下，什么是Vue-cli？ Vue是一套用于構(gòu)建用戶界面的漸...

    NoraXie 評(píng)論0 收藏0

  • 記自己一次vue基礎(chǔ)實(shí)戰(zhàn)：配置篇

    摘要：前言記錄自己從基礎(chǔ)學(xué)習(xí)實(shí)戰(zhàn)，初入發(fā)表文章，望各位大佬口下留情不對(duì)之處還請(qǐng)大佬指點(diǎn)一下。在加載完后，你自己默認(rèn)的瀏覽器自動(dòng)打開配置界面新建項(xiàng)目。 1. 前言 記錄自己從基礎(chǔ)學(xué)習(xí)vue實(shí)戰(zhàn)，初入發(fā)表文章，望各位大佬口下留情！不對(duì)之處還請(qǐng)大佬指點(diǎn)一下。 2. 新建，配置項(xiàng)目 1. 新建Vue-cli3.0腳手架的項(xiàng)目 在這里普及一下，什么是Vue-cli？ Vue是一套用于構(gòu)建用戶界面的漸...

    SmallBoyO 評(píng)論0 收藏0

  • 小光光談前端

    摘要：這個(gè)問(wèn)題應(yīng)該是百度或者知乎都能知道答案的，以上是自己親身學(xué)習(xí)的一些途徑方便少走一點(diǎn)彎路入門。 問(wèn)題1：前端的學(xué)習(xí)路線 基礎(chǔ)的html，css，js，推薦慕課網(wǎng)免費(fèi)課程:前端工程師路徑,極客學(xué)院免費(fèi)課程:前端工程師路徑 大概刷過(guò)就可以了，不用死記硬背某個(gè)知識(shí)點(diǎn)，css跟js還需要加深學(xué)習(xí)的，在實(shí)戰(zhàn)過(guò)程中不懂就去查文檔 基礎(chǔ)的ps切圖能力 慕課網(wǎng)ps基礎(chǔ)課程 擁有自己的虛擬主機(jī) 傳送...

    canopus4u 評(píng)論0 收藏0

  • 小光光談前端

    摘要：這個(gè)問(wèn)題應(yīng)該是百度或者知乎都能知道答案的，以上是自己親身學(xué)習(xí)的一些途徑方便少走一點(diǎn)彎路入門。 問(wèn)題1：前端的學(xué)習(xí)路線 基礎(chǔ)的html，css，js，推薦慕課網(wǎng)免費(fèi)課程:前端工程師路徑,極客學(xué)院免費(fèi)課程:前端工程師路徑 大概刷過(guò)就可以了，不用死記硬背某個(gè)知識(shí)點(diǎn)，css跟js還需要加深學(xué)習(xí)的，在實(shí)戰(zhàn)過(guò)程中不懂就去查文檔 基礎(chǔ)的ps切圖能力 慕課網(wǎng)ps基礎(chǔ)課程 擁有自己的虛擬主機(jī) 傳送...

    shiguibiao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<