天天看點
傳回

配置安裝相關vue-cli 3.0vue 3.0以下 webpack 打包 DllPlugin & DllReferencePluginVSCODE編輯器

ssh 建立

  • ① cd ~/.ssh/ 【如果沒有對應的檔案夾，則執行 mkdir ./.ssh】
  • ② git config --global user.name "xb12369"
  • ③ git config --global user.email "[email protected]"
  • ④ ssh-keygen -t rsa -C [email protected]，加粗部分替換成自己的
  • 進入.ssh目錄：cd ~/.ssh，
  • 找到id_rsa.pub檔案：ls，
  • 檢視公鑰：cat id_rsa.pub 或者 vim id_rsa.pub

yarn 更新

  • npm uninstall -g yarn && npm install -g yarn

git 擷取本地代碼

  • 更多操作點選 傳送門 
假如說分支為 fenzhi
git clone [email protected]:xxx/xxx.git
// 下載下傳指定分支 -b 分支名
git clone -b 分支名稱 [email protected]:xxx/xxx.git 

git fetch origin fenzhi
<!--指令來把遠端dev分支拉到本地-->

git checkout -b dev origin/dev
<!--在本地建立分支dev并切換到該分支-->y

git pull origin fenzhi
<!--就可以把遠端dev分支上的内容都拉取到本地了-->
 
2.git pull 
// 更新

//添加全部
git add .

//送出全部
git commit -m '更新日志'

//送出到伺服器
git push origin fenzhi
或者
git push

環境變量的概念

環境變量就是作業系統提供的系統級别用于存儲變量的地方
  • Windows中環境變量分為系統變量和使用者變量
  • 環境變量的變量名是不區分大小寫的
  • 特殊值：
    • PATH 變量：隻要添加到 PATH 變量中的路徑，都可以在任何目錄下搜尋

Windows下常用的指令行操作

  • 切換目前目錄（change directory）：cd
  • 建立目錄（make directory）：mkdir
  • 檢視目前目錄清單（directory）：dir
    • 别名：ls（list）
  • 清空目前控制台：cls
    • 别名：clear
  • 删除檔案：del
    • 别名：rm
注意：所有别名必須在新版本的 PowerShell 中使用

下載下傳，安裝

  • cnpm 安裝指令 
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 檢視版本 
cnpm -v
  • npm就自動為我們更新到最新版本 
npm install -g npm

npm常用指令 

詳細連結： https://www.cnblogs.com/itlkNote/p/6830682.html
  • npm是什麼
  • npm install 安裝子產品
  • npm uninstall 解除安裝子產品
  • npm update 更新子產品
  • npm outdated 檢查子產品是否已經過時
  • npm ls 檢視安裝的子產品
  • npm init 在項目中引導建立一個package.json檔案
  • npm help 檢視某條指令的詳細幫助
  • npm root 檢視包的安裝路徑
  • npm config 管理npm的配置路徑
  • npm cache 管理子產品的緩存
  • npm start 啟動子產品
  • npm stop 停止子產品
  • npm restart 重新啟動子產品
  • npm test 測試子產品
  • npm version 檢視子產品版本
  • npm view 檢視子產品的注冊資訊
  • npm adduser 使用者登入
  • npm publish 釋出子產品
  • npm access 在釋出的包上設定通路級别
  • npm package.json的文法

SourceTree 跳過注冊

  • %LocalAppData%\Atlassian\SourceTree\ 檔案夾位址 
accounts.json
[
  {
    "$id": "1",
    "$type": "SourceTree.Api.Host.Identity.Model.IdentityAccount, SourceTree.Api.Host.Identity",
    "Authenticate": true,
    "HostInstance": {
      "$id": "2",
      "$type": "SourceTree.Host.Atlassianaccount.AtlassianAccountInstance, SourceTree.Host.AtlassianAccount",
      "Host": {
        "$id": "3",
        "$type": "SourceTree.Host.Atlassianaccount.AtlassianAccountHost, SourceTree.Host.AtlassianAccount",
        "Id": "atlassian account"
      },
      "BaseUrl": "https://id.atlassian.com/"
    },
    "Credentials": {
      "$id": "4",
      "$type": "SourceTree.Model.BasicAuthCredentials, SourceTree.Api.Account",
      "Username": "",
      "Email": null
    },
    "IsDefault": false
  }
]

二、打開webpack.base.config.js在loaders裡面加上

rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }

三、在.vue檔案中

<style  type="text/css">
    @import url('common/css/reset.css');

    $vw_base: 375; 
    @function vw($px) {
        @return ($px / 375) * 100vw;
    }

    .main {
        display: flex;
        width: vw(50);
    }
</style>

vue-cli 3.0

  • yarn add pug-html-loader pug-plain-loader
  • 在vue.config.js中添加 
chainWebpack: config => {

		config.module
			.rule('pug')
			.test(/\.pug$/)
			.use('pug-html-loader')
			.loader('pug-html-loader')
			.end();
	}

vue 3.0以下 webpack 打包 DllPlugin & DllReferencePlugin

https://www.cnblogs.com/macq/p/8330316.html

Dll這個概念應該是借鑒了Windows系統的dll。一個dll包，就是一個純純的依賴庫，它本身不能運作，是用來給你的app引用的。

打包dll的時候，Webpack會将所有包含的庫做一個索引，寫在一個manifest檔案中，而引用dll的代碼（dll user）在打包的時候，隻需要讀取這個manifest檔案，就可以了。

一、在項目build檔案夾下新增檔案webpack.dll.conf.js，内容如下

  • 内容如下 
var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: {
    vendor: [  //  這裡填寫需要的依賴庫
      'babel-polyfill',
      'axios',
      'vue/dist/vue.common.js',
      'vue-router',
      'pingpp-js',
      "region-picker"
    ]
  },
  output: {
    path: path.resolve(__dirname, '../static/js'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      libraryTarget: 'commonjs2',
      name: '[name]_library'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

二、在webpack.prod.conf.js檔案裡插件部分添加： 

plugins: [
  ...
  // copy custom static assets
    new webpack.DllReferencePlugin({
       context: path.resolve(__dirname, '..'),
       manifest: require('./vendor-manifest.json')
    })
]

三、在項目根目錄index.html檔案中添加： 

<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script  src="<%= webpackConfig.output.publicPath %>spa/js/vendor.dll.js"></script>     //添加這句，路徑可根據所需修改
</body>

四、在package.json裡打包dll添加指令 

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    "dll": "webpack --config ./webpack.dll.config.js"
  },


"build:dll": "webpack --config build/webpack.dll.conf.js"

指令順序 

npm run build:dll //打包一次之後依賴庫無變動不需要執行

npm run build

優點

Dll打包以後是獨立存在的，隻要其包含的庫沒有增減、更新，hash也不會變化，是以線上的dll代碼不需要随着版本釋出頻繁更新。

App部分代碼修改後，隻需要編譯app部分的代碼，dll部分，隻要包含的庫沒有增減、更新，就不需要重新打包。這樣也大大提高了每次編譯的速度。

假設你有多個項目，使用了相同的一些依賴庫，它們就可以共用一個dll。

VSCODE編輯器

  • 公司的配置 
"workbench.iconTheme": "vscode-icons",
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "explorer.confirmDelete": false,
    "window.zoomLevel": 0,
    "files.associations": {
        "*.wxml": "html"
    },
    "editor.detectIndentation": false,
    "cssrem.rootFontSize": 23.4375,
    "[yaml]": {
        "editor.insertSpaces": true,
        "editor.tabSize": 4,
        "editor.autoIndent": false
    },
    "editor.renderWhitespace": "all",
    "prettier.tabWidth": 4,
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分号
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之後是否換行
    "stylusSupremacy.insertNewLineAroundBlocks": false,
    "vetur.format.defaultFormatter.js": "vscode-typescript",
  • 空格配置（格式化） 
"editor.tabSize": 4,
    "editor.renderWhitespace": "all",
    "editor.detectIndentation": false,

    "prettier.tabWidth": 4,
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分号
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之後是否換行
    "stylusSupremacy.insertNewLineAroundBlocks": false,
    "vetur.format.defaultFormatter.js": "vscode-typescript",
  • cssrem插件 
"cssrem.rootFontSize": 23.4375,
  • 公司使用插件 
* vscode-icons

* Vue 2 Snippets

* language-stylus

* Chinese (Simplified) Language Pack for Visual Studio Code
(适用于 VS Code 的中文（簡體）語言包)

* vscode wxml
(微信小程式 wxml)

VsCode 編輯器的 安裝插件

  • Auto Close Tag

    自動關閉标記

  • Auto Rename Tag

    自動重命名标記

  • vscode-icons
  • Vue 2 Snippets
  • vscode-icons
  • Vue VSCode Snippets
  • 檢視資料
  • Vetur
  • ESLint
  • TSLint
  • Prettier - Code formatter
  • language-stylus

VsCode 編輯器的setting.json 

// VScode主題配置
{
    // 啟用/禁用導航路徑。
    "breadcrumbs.enabled": true,
    "workbench.iconTheme": "vscode-icons",
    // 終端在 Windows 上使用的 Shell 的路徑。
    "terminal.integrated.shell.windows": "C:\\windows\\System32\\cmd.exe",
    
    // 啟用後，儲存檔案時将删除在最終新行後的所有新行。
    "files.trimFinalNewlines": false,
    // 控制是否在打開檔案時，基于檔案内容自動檢測 `editor.tabSize#` 和 `#editor.insertSpaces`。
    "editor.detectIndentation": true, 
    // 控制折行的方式。
    //  - off: 永不換行。
    //  - on: 将在視區寬度處換行。
    //  - wordWrapColumn: 在 `editor.wordWrapColumn` 處折行。
    //  - bounded: 在視區寬度和 `editor.wordWrapColumn` 中的較小值處折行。
    "editor.wordWrap": "on",
    // 按住 `Ctrl` 鍵并滾動滑鼠滾輪時對編輯器字型大小進行縮放。
    "editor.mouseWheelZoom": true,
    // 控制編輯器在鍵入一行後是否自動格式化該行。
    "editor.formatOnType": true,
    // 針對 [json] 語言，配置替代編輯器設定。
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    }, 
    // 定義函數參數括号前的空格處理方式。
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, 
  
    "editor.renderControlCharacters": true,// 控制編輯器是否顯示控制字元。
    // 控制編輯器在空白字元上顯示符号的方式。
    //  - none
    //  - boundary: 除了單個空格，在空白字元上顯示符号。
    //  - all
    "editor.renderWhitespace": "all",
    "editor.tabSize": 4,
    // 啟用 Tab 補全。
    //  - on: 在按下 Tab 鍵時進行 Tab 補全，将插入最佳比對建議。
    //  - off: 禁用 Tab 補全。
    //  - onlySnippets: 在字首比對時進行 Tab 補全。在 "quickSuggestions" 未啟用時體驗最好。
    "editor.tabCompletion": "on",
    // 空格表示為一個小點，tab表示為一個箭頭,true為小點顯示
    "editor.insertSpaces": true,
        // 以像素為機關控制字型大小。
    "editor.fontSize": 14,
    "editor.fontFamily": "'DejaVu Sans Mono',Monaco,Consolas,monospace",
    // 控制代碼片段是否與其他建議一起顯示及其排列的位置。
    //  - top: 在其他建議上方顯示代碼片段建議。
    //  - bottom: 在其他建議下方顯示代碼片段建議。
    //  - inline: 在其他建議中穿插顯示代碼片段建議。
    //  - none: 不顯示代碼片段建議。
    "editor.snippetSuggestions": "top",

    // 控制編輯器是否自動格式化粘貼的内容。格式化程式必須可用，并且能針對文檔中的某一範圍進行格式化。
    "editor.formatOnPaste": true,

    "vsicons.dontShowNewVersionMessage": true,
    "editor.formatOnSave": true,
    "html.format.endWithNewline": true,
    "editor.suggestSelection": "first",
    // "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue", 
    // 啟用或禁用字型連字。
    "editor.fontLigatures": false,

    // #每次儲存的時候将代碼按eslint和tslint格式進行修複
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": true,
        "eslint.autoFixOnSave": false,
        "source.fixAll.tslint": true
    },

    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            // #vue元件中html代碼格式化樣式
            "wrap_attributes": "force-aligned", //也可以設定為“auto”，效果會不一樣
            "wrap_line_length": 200,
            "end_with_newline": false,
            "semi": false,
            "singleQuote": true
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        },
        "prettier": {
            "semi": false,
            "singleQuote": true
        },
    },
    // "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.ts": "prettier", 
    "vetur.format.options.tabSize": 4,

    //使用eslint plugin vue在<template>中驗證vue html
    "vetur.validation.template": true,

    // 控制已更新檔案的自動儲存。可在[此處](https://code.visualstudio.com/docs/editor/codebasics#_save-auto-save)閱讀有關自動儲存的詳細資訊。
    //  - off: 永不自動儲存更新後的檔案。
    //  - afterDelay: 當檔案修改後的時間超過 `files.autoSaveDelay` 中配置的值時自動進行儲存。
    //  - onFocusChange: 編輯器失去焦點時自動儲存更新後的檔案。
    //  - onWindowChange: 視窗失去焦點時自動儲存更新後的檔案。
    "files.autoSave": "onWindowChange",

    // VScode 檔案搜尋區域配置
    "search.exclude": {
        "**/dist": true,
        "**/build": true,
        "**/elehukouben": true,
        "**/.git": true,
        "**/.gitignore": true,
        "**/.svn": true,
        "**/.DS_Store": true,
        "**/.idea": true,
        "**/.vscode": false,
        "**/yarn.lock": true,
        "**/tmp": true,
        "**/node_modules": true,
        "**/.vue": true,
        "**/bower_components": true
    },
    // 排除檔案搜尋區域，比如node_modules
    "files.exclude": {
        "**/.idea": true,
        "**/yarn.lock": true,
        "**/tmp": true
    },
    // 配置檔案關聯
    "files.associations": {
        "*.ejs": "html",
        "*.vue": "html",
        // "*.vue": "vue",
        "*.wxss": "css",
        "*.cjson": "jsonc",
        "*.wxs": "javascript"
    },
    "eslint.run": "onSave",
    // 需要安裝，eslint
    // 是否開啟eslint檢測
    // "eslint.enable": true,
    // eslint配置檔案
    "eslint.options": {
        // "configFile": "C:/Users/Administrator/AppData/Roaming/npm/node_modules/eslint/.eslintrc.js",
        "plugins": ["html"],
        "extensions": [".js", ".vue"]
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue-html",  
        "typescriptreact",
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        }
    ],
    // 檔案儲存時，是否自動根據eslint進行格式化
    "eslint.autoFixOnSave": true,

    // prettier進行格式化時是否安裝eslint配置去執行，建議false
    //使用“prettier eslint”而不是“prettier”。其他設定隻有在無法從eslint規則推斷出時才作為後備。
    "prettier.eslintIntegration": false,
    // 每個标簽應該使用的空格數量
    "prettier.tabWidth": 4,
    // 如果為true，将使用單引号而不是雙引号
    "prettier.singleQuote": true,
    //（預設：true）是否在每行的末尾添加分号(false)
    "prettier.semi": true,
    // 如果為true，則使用制表符縮進行（預設：false）
    "prettier.useTabs": false,

    // 配置gitlen中git送出曆史記錄的資訊顯示情況
    "gitlens.advanced.messages": {
        "suppressCommitHasNoPreviousCommitWarning": false,
        "suppressCommitNotFoundWarning": false,
        "suppressFileNotUnderSourceControlWarning": false,
        "suppressGitVersionWarning": false,
        "suppressLineUncommittedWarning": false,
        "suppressNoRepositoryWarning": false,
        "suppressResultsExplorerNotice": false,
        "suppressShowKeyBindingsNotice": true,
        "suppressUpdateNotice": true,
        "suppressWelcomeNotice": false
    },
    // 同步 Git 存儲庫前請先進行确認。
    "git.confirmSync": false,

    // 在沒有暫存的更改時送出所有更改。
    "git.enableSmartCommit": true, // 在沒有暫存的更改時送出所有更改。

    //指定用于GitLens快捷鍵的鍵映射
    //-alternate：添加一組以“Alt”開頭的快捷鍵（在macOS上為⌥）
    //-chorded：添加一組以“Ctrl+Alt+G”開頭的快捷鍵（macOS上為“G”）
    //-無：不會添加快捷鍵
    "gitlens.keymap": "chorded",
 
    // 格式化stylus後的代碼經常會添加大括号和分号，先在拓展商店裡下載下傳language-stylus
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分号
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之後是否換行
    "stylusSupremacy.insertNewLineAroundBlocks": false,
    "gitlens.gitExplorer.files.layout": "tree",
    "gitlens.historyExplorer.enabled": true,
    "[paradox]": {},
    "explorer.confirmDelete": false,
    "workbench.startupEditor": "welcomePage",
    "workbench.sideBar.location": "left", 
    "workbench.colorCustomizations": {
        "editorUnnecessaryCode.border": "#ff0000"
    },
    "window.menuBarVisibility": "default",
    "workbench.statusBar.visible": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "extensions.ignoreRecommendations": false,
    "window.zoomLevel": 0,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }, 
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }, 

    // 在預設不支援 Emmet 的語言中啟用 Emmet 縮寫功能。在此添加該語言與受支援的語言間的映射。
    // 示例: `{"vue-html": "html", "javascript": "javascriptreact"}`
    "emmet.includeLanguages": {
        "wxml": "html"
    },
    
    //在vue檔案裡設定html關聯
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    "explorer.confirmDragAndDrop": false, 
 
}

}

VUE的 .eslintrc.js 

// https://eslint.org/docs/user-guide/configuring

module.exports = {
    root: true,
    parserOptions: {
        parser: 'babel-eslint'
    },
    env: {
        browser: true,
        commonjs: true,
        node: true,
        es6: true
    },
    extends: [
        // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
        // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
        'plugin:vue/essential'
    ],
    // required to lint *.vue files
    plugins: ['vue'],
    // add your custom rules here
    rules: {
        // allow async-await
        'generator-star-spacing': 'off',
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        // 4個空格縮進
        indent: ['error', 4],
        // 注釋必須跟随一個空白
        'spaced-comment': ['error', 'always'],
        // 盡量用 '' 有變量時可用 ``
        quotes: ['error', 'single'],
        // 總是 ; 結尾語句
        semi: ['error', 'always'],
        // 對不包含 await 表達式的 async 函數發出警告
        'require-await': 'warn',
        // 禁止在 function 定義中出現重複的參數
        'no-dupe-args': 'error',
        // 禁止在對象字面量中出現重複的鍵
        'no-dupe-keys': 'error',
        // 禁止空塊語句
        'no-empty': 'error',
        // 禁用不必要的分号
        'no-extra-semi': 'error',
        // 禁止對 function 聲明重新指派
        'no-func-assign': 'error',
        // 禁止将全局對象當作函數進行調用
        'no-obj-calls': 'error',
        // 禁止在正常字元串中出現模闆字面量占位符文法
        'no-template-curly-in-string': 'error',
        // 禁止在 return、throw、continue 和 break 語句後出現不可達代碼
        'no-unreachable': 'error',
        // 強制數組方法的回調函數中有 return 語句
        'array-callback-return': 'error',
        // 要求 Switch 語句中有 Default 分支
        'default-case': 'error',
        // 禁止出現空函數
        'no-empty-function': 'error',
        // 禁用 eval()
        'no-eval': 'error',
        // 禁止對原生對象或隻讀的全局對象進行指派
        'no-global-assign': 'error',
        // 禁止出現多個空格
        'no-multi-spaces': 'error',
        // 禁止多行字元串
        'no-multi-str': 'error',
        // 禁止原始包裝執行個體
        'no-new-wrappers': 'error',
        // 禁止重新聲明變量
        'no-redeclare': 'error',
        // 禁止自身指派
        'no-self-assign': 'error',
        // 要求使用 Error 對象作為 Promise 拒絕的原因
        'prefer-promise-reject-errors': 'error',
        // 禁止變量聲明覆寫外層作用域的變量
        'no-shadow': 'error',
        // 禁用未聲明的變量
        'no-undef': 'error',
        // 不允許初始化變量值為 undefined
        'no-undef-init': 'error',
        // 強制在子產品頂部調用 require()
        'global-require': 'error',
        // 禁止或強制在代碼塊中開括号前和閉括号後有空格
        'block-spacing': ['error', 'always'],
        // 大括号風格要求
        'brace-style': 'error',
        // 要求使用駱駝拼寫法
        camelcase: ['error', { properties: 'always' }],
        // 逗号風格
        'comma-style': ['error', 'last'],
        // 要求或禁止在函數辨別符和其調用之間有空格
        'func-call-spacing': ['error', 'never'],
        // 強制隐式傳回的箭頭函數體的位置
        'implicit-arrow-linebreak': ['error', 'beside'],
        // 強制在對象字面量的鍵和值之間使用一緻的空格
        'key-spacing': [
            'error',
            { beforeColon: false, afterColon: true, mode: 'strict' }
        ],
        // 強制關鍵字周圍空格的一緻性
        'keyword-spacing': ['error', { before: true, after: true }],
        // 禁止使用 空格 和 tab 混合縮進
        'no-mixed-spaces-and-tabs': 'error',
        // 不允許多個空行,最大為2行,強制檔案末尾的最大連續空行數為1,強制檔案開始的最大連續空行數為1
        'no-multiple-empty-lines': ['error', { max: 2, maxEOF: 1, maxBOF: 0 }],
        // 禁止屬性前有空白
        'no-whitespace-before-property': 'error',
        // 要求對象字面量屬性名稱的使用
        'quote-props': ['error', 'as-needed'],
        // 強制分号前後不能有空格
        'semi-spacing': ['error', { before: false, after: true }],
        // 要求或禁止函數圓括号之前有一個空格
        'space-before-function-paren': ['error', 'never'],
        // 禁止或強制圓括号内的空格
        'space-in-parens': ['error', 'never'],
        // 要求中綴操作符周圍有空格
        'space-infix-ops': 'error',
        // 要求或禁止在模闆标記和它們的字面量之間有空格
        'template-tag-spacing': 'error',
        // 要求箭頭函數體使用大括号
        'arrow-body-style': ['error', 'always'],
        // 要求箭頭函數的參數當隻有一個參數時允許省略圓括号
        'arrow-parens': ['error', 'as-needed'],
        // 要求箭頭函數的箭頭之前或之後有空格
        'arrow-spacing': ['error', { before: true, after: true }],
        // 不允許改變用const聲明的變量
        'no-const-assign': 'error',
        // 不允許類成員中有重複的名稱
        'no-dupe-class-members': 'error',
        // 禁止重複導入
        'no-duplicate-imports': 'error',
        // 強制剩餘和擴充運算符及其表達式之間沒有空格
        'rest-spread-spacing': ['error', 'never'],
        // 該規則要求在方法鍊中 允許在同一行成鍊的深度為2
        'newline-per-chained-call': ['error', { ignoreChainWithDepth: 2 }]
    }
};

js的 .eslintrc.js 

module.exports = {
    env: {
        browser: true,
        commonjs: true,
        node: true,
        es6: true,
        jquery: true
    },
    parserOptions: {
        ecmaVersion: 2017,
        sourceType: 'module'
    },
    rules: {
        'generator-star-spacing': 'off',
        //4個空格縮進
        indent: ['error', 4],
        //注釋必須跟随一個空白
        'spaced-comment': ['error', 'always'],
        //盡量用 '' 有變量時可用 ``
        quotes: ['error', 'single'],
        //總是 ; 結尾語句
        semi: ['error', 'always'],
        //對不包含 await 表達式的 async 函數發出警告
        'require-await': 'warn',
        //禁止在 function 定義中出現重複的參數
        'no-dupe-args': 'error',
        //禁止在對象字面量中出現重複的鍵
        'no-dupe-keys': 'error',
        //禁止空塊語句
        'no-empty': 'error',
        //禁用不必要的分号
        'no-extra-semi': 'error',
        //禁止對 function 聲明重新指派
        'no-func-assign': 'error',
        //禁止将全局對象當作函數進行調用
        'no-obj-calls': 'error',
        //禁止在正常字元串中出現模闆字面量占位符文法
        'no-template-curly-in-string': 'error',
        //禁止在 return、throw、continue 和 break 語句後出現不可達代碼
        'no-unreachable': 'error',
        //強制數組方法的回調函數中有 return 語句
        'array-callback-return': 'error',
        //要求 Switch 語句中有 Default 分支
        'default-case': 'error',
        //禁止出現空函數
        'no-empty-function': 'error',
        //禁用 eval()
        'no-eval': 'error',
        //禁止對原生對象或隻讀的全局對象進行指派
        'no-global-assign': 'error',
        //禁止出現多個空格
        'no-multi-spaces': 'error',
        //禁止多行字元串
        'no-multi-str': 'error',
        //禁止原始包裝執行個體
        'no-new-wrappers': 'error',
        //禁止重新聲明變量
        'no-redeclare': 'error',
        //禁止自身指派
        'no-self-assign': 'error',
        //要求使用 Error 對象作為 Promise 拒絕的原因
        'prefer-promise-reject-errors': 'error',
        //禁止變量聲明覆寫外層作用域的變量
        'no-shadow': 'error',
        //禁用未聲明的變量
        'no-undef': 'error',
        //不允許初始化變量值為 undefined
        'no-undef-init': 'error',
        //強制在子產品頂部調用 require()
        'global-require': 'error',
        //禁止或強制在代碼塊中開括号前和閉括号後有空格
        'block-spacing': ['error', 'always'],
        //大括号風格要求
        'brace-style': 'error',
        //要求使用駱駝拼寫法
        camelcase: ['error', { properties: 'always' }],
        //逗号風格
        'comma-style': ['error', 'last'],
        //要求或禁止在函數辨別符和其調用之間有空格
        'func-call-spacing': ['error', 'never'],
        //強制隐式傳回的箭頭函數體的位置
        'implicit-arrow-linebreak': ['error', 'beside'],
        //強制在對象字面量的鍵和值之間使用一緻的空格
        'key-spacing': [
            'error',
            { beforeColon: false, afterColon: true, mode: 'strict' }
        ],
        //強制關鍵字周圍空格的一緻性
        'keyword-spacing': ['error', { before: true, after: true }],
        //禁止使用 空格 和 tab 混合縮進
        'no-mixed-spaces-and-tabs': 'error',
        //不允許多個空行,最大為2行,強制檔案末尾的最大連續空行數為1,強制檔案開始的最大連續空行數為1
        'no-multiple-empty-lines': ['error', { max: 2, maxEOF: 1, maxBOF: 0 }],
        //禁止屬性前有空白
        'no-whitespace-before-property': 'error',
        //要求對象字面量屬性名稱的使用
        'quote-props': ['error', 'as-needed'],
        //強制分号前後不能有空格
        'semi-spacing': ['error', { before: false, after: true }],
        //要求或禁止函數圓括号之前有一個空格
        'space-before-function-paren': ['error', 'never'],
        //禁止或強制圓括号内的空格
        'space-in-parens': ['error', 'never'],
        //要求中綴操作符周圍有空格
        'space-infix-ops': 'error',
        //要求或禁止在模闆标記和它們的字面量之間有空格
        'template-tag-spacing': 'error',
        //要求箭頭函數體使用大括号
        'arrow-body-style': ['error', 'always'],
        //要求箭頭函數的參數當隻有一個參數時允許省略圓括号
        'arrow-parens': ['error', 'as-needed'],
        //要求箭頭函數的箭頭之前或之後有空格
        'arrow-spacing': ['error', { before: true, after: true }],
        //不允許改變用const聲明的變量
        'no-const-assign': 'error',
        //不允許類成員中有重複的名稱
        'no-dupe-class-members': 'error',
        //禁止重複導入
        'no-duplicate-imports': 'error',
        //強制剩餘和擴充運算符及其表達式之間沒有空格
        'rest-spread-spacing': ['error', 'never'],
        // 該規則要求在方法鍊中 允許在同一行成鍊的深度為2
        'newline-per-chained-call': ['error', { ignoreChainWithDepth: 3 }]
    }
};

NVM工具的使用

Node Version Manager（Node版本管理工具）

由于以後的開發工作可能會在多個Node版本中測試，而且Node的版本也比較多，是以需要這麼款工具來管理

安裝操作步驟

  1. 下載下傳：nvm-windows
  2. 解壓到一個全英文路徑
  3. 編輯解壓目錄下的

    settings.txt

     檔案（不存在則建立）

  • root 配置為目前 nvm.exe 所在目錄

  • path 配置為 node 快捷方式所在的目錄

  • arch 配置為目前作業系統的位數（32/64）

  • proxy 不用配置
  1. 配置環境變量 可以通過 window+r : sysdm.cpl

  • NVM_HOME = 目前 nvm.exe 所在目錄

  • NVM_SYMLINK = node 快捷方式所在的目錄

  • PATH += %NVM_HOME%;%NVM_SYMLINK%;
  • 打開CMD通過

    set [name]

     指令檢視環境變量是否配置成功
  • PowerShell中是通過

    dir env:[name]

     指令
  1. NVM使用說明：
  • https://github.com/coreybutler/nvm-windows/
  1. NPM的目錄之後使用再配置
上一篇: pytorch安裝相關
下一篇: 國家需要正能量，國家需要社會基本認知共識，國家需要社會正向價值建構系統！但如何傳播社會基本認知共識，建構社會正向價值系統