国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue項目中使用eslint的筆錄,編輯器采用sublime3

劉明 / 419人閱讀

摘要:一前言本文主要針對編輯器是的項目進行代碼規范。因此對進行語法檢查的工具應運而生,目前使用最為廣泛。這篇將講解如何將集成到我們的項目中。七總結在項目上使用實際上還算相對簡單的,但是對于什么都是半生半熟的知識技能的人來說還是花了點時間。

一、前言

本文主要針對編輯器是sublime的vue項目進行eslint代碼規范。

Javascript 是一門弱類型語言,所以語法檢查變得尤為重要。雖然有很多前端IDE開發工具,可以很好地幫助我們提示在編寫時的錯誤,但是大多數開發者還是使用的像 Sublime Text、Visual Studio Code 之類的輕量級編輯器,這導致在開發中很容易出現各種錯誤,比如單詞拼寫錯誤,漏掉了括號等。而且每個人的代碼編寫習慣也不一樣,因此有的項目的代碼格式千差萬別,比如 縮進空格數,有的習慣4個,有的習慣2個,這也導致項目維護起來越來越麻煩,遇到錯誤也很難定位。因此對 Javascript 進行語法檢查的工具應運而生,目前 ESLint 使用最為廣泛。這篇將講解如何將 ESLint 集成到我們的項目中。

二、實現過程
1. **sublime text 3 的安裝**
   1.1 sublime text 3的安裝,這個網上自行查找安裝方法
   1.2 sublime 相關eslint的插件安裝,sublimelinter,sublimelinter-eslint
2. vue項目的創建
   2.1 按照網上提供的方案安裝,這里采用的是 “ vue init webpack ”的安裝方式,這個會提示安裝eslint即選擇何種代碼規范(這里選擇airbnb-base)
3. **npm安裝eslint相關插件**
   3.1 vue-plugin-vue/html
   3.2 vue-eslint-parser
   3.3 babel-eslint
   3.4 airbnb-base (代碼規范)
4. **配置方案**
   本文主要通過配置 ***“.eslintrc.js”*** 實現eslint的代碼規范要求。
   ESLint 具有高可配置行,這就意味著你可以根據項目需求定制代碼檢查規則。
   ESLint 的配置方式可以有以下兩種方式:
   --**文件注釋:**在 Javascript 文件中使用注釋包裹配置內容。
   --**配置文件(推薦):**在項目根目錄下創建包含檢查規則的 .eslintrc.* 文件。
三、sublime text 3 的安裝
1. sublmie的安裝
    可以參考如下地址進行安裝
    https://blog.csdn.net/wxl1555/article/details/69941451
2. eslint的sublmie插件
    sublimelinter,sublimelinter-eslint
四、創建VUE項目

通過使用命令創建vue項目 :
`

vue init webpack      //  初始化安裝VUE項目
project name          //  輸入項目名稱
project description   //  輸入項目說明
author                //  輸入作者
Vue build             //  運行環境
Install vue-router
Use ESLint to lint your code (Yes/No)  //選擇YES,安裝eslint插件
(選擇代碼規范airbnb)
Set up unit tests (Y/N)
.... 

五、npm安裝eslint相關插件

在項目目錄下,通過使用npm命令安裝eslint相關插件

airbnb-base (代碼規范)
目前比較流行airbnb公司的代碼規范,目前主要使用“air-base”,
安裝依賴:

 npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev

你也可以根據自己需要,到eslit-aribnb安裝地址https://www.npmjs.com/package... 進行安裝。
如果使用vue項目安裝方式可以選擇這個規范

babel-eslint
babel-eslint 解析器是對babel解析器的包裝使其與ESLint解析

vue-eslint-parser
此解析器主要是針對vue文件的template的vue標簽進行驗證

eslint-plugin-vue
也是針對vue文件的內容進行驗證,不能和 eslint-plugin-html放在配置文件中,否則至少放在此插件后面。

六、配置方案

配置文件內容如下,可以根據自己的要求進行更改:

.eslintrc.js 文件配置內容
airbnb的規范雖然比較成熟了,但是每個人都有一些自己的需求,可以按需修改或增加一些規則

 // https://eslint.org/docs/user-guide/configuring
   module.exports = {
     root: true,
     parser: "vue-eslint-parser",
     parserOptions: {
       "ecmaVersion": 6,
       "parser": "babel-eslint",
       "sourceType": "module",
       "allowImportExportEverywhere": false
     },
  env: {
      browser: true,
     },
 // 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.
  extends: ["plugin:vue/strongly-recommended", "airbnb-base"],
  // required to lint *.vue files
  plugins: [
  "vue",
  "vuefix",
 ],
 // check if imports actually resolve
 settings: {
   "import/resolver": {
     webpack: {
       config: "build/webpack.base.conf.js"
     }
   }
 },
 // add your custom rules here
 rules: {
   // don"t require .vue extension when importing
   "import/extensions": ["error", "always", {
     js: "never",
     vue: "never"
   }],
   "linebreak-style": "off",
   "import/no-unresolved": 0,
   "import/no-dynamic-require": "off",
   "max-len": [0, 120, 2],
   "space-before-function-paren": ["error", {
       "anonymous": "never",
       "named": "always",
       "asyncArrow": "always"
   }],
   // disallow reassignment of function parameters
   // disallow parameter object manipulation except for specific exclusions
   "no-param-reassign": ["error", {
     props: true,
     ignorePropertyModificationsFor: [
       "state", // for vuex state
       "acc", // for reduce accumulators
       "e" // for e.returnvalue
     ]
   }],
   // allow optionalDependencies
   "import/no-extraneous-dependencies": ["error", {
     optionalDependencies: ["test/unit/index.js"]
   }],
   // allow debugger during development
   "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
   // 禁止使用 console 來調試程序,在運行 npm run myEslint 時,命令行不會輸出 no-console 警告
   "no-console": "off",
 }

}

package.json文件配置
在此文件的scripts中添加一行eslint驗證執行命令

   "scripts": {
       "myEslint": "eslint --ext .js,.vue src"
    },

當然你也可以全局安裝以上依賴,這樣你可以直接運行 eslint --ext .js,.vue src 命令。
Ok, 配置好了~
命令行運行 npm run myEslint
你會發現檢查出一堆錯誤,不要方,輸出的錯誤說明的非常明顯,只需要根據錯誤提示行號去檢查,然后 根據規則更改就行了。
上面的命令中 --ext 參數就是用來指定需要檢查的擴展名的文件,src 就是指定檢查的目錄。

七、 總結

在vue項目上使用ESLint實際上還算相對簡單的,但是對于什么都是半生半熟的知識技能的人來說還是花了點時間。
eslint無論是安裝還是配置,實際上還算是比較人性化的。
想要成為一名優秀的程序員,規范化的代碼風格格外重要,除了能降低代碼出錯率,還在代碼的可讀性上非常有幫助,另外代碼注釋對于代碼的可讀性也是必不可少的。
讓eslint成為你編寫代碼的好幫手吧。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95441.html

相關文章

  • vscode一格式化就報錯?各種風格問題各種報錯煩不勝煩,教你如何用好vueeslint風格配置

    摘要:格式化安裝插件如果題主認真讀了的的話,應該可以寫出下面的配置了。用來格式化和提示格式錯誤。在編碼過程中提示格式錯誤,養成良好的編碼習慣。 前言 感覺搭建一個舒服的前端開發環境,十分的重要定制化的格式化,編輯器自帶的格式化各種報錯,手動改真的會死人,因此搭建一個編輯器環境必不可少,現在要講的是vscode中如何定制vue vs code的配置文件: showImg(https://seg...

    Achilles 評論0 收藏0
  • Vue 2.0 開發聊天程序(一): 初建項目

    摘要:它采用集中式存儲管理應用的所有組件的狀態,并以相應的規則保證狀態以一種可預測的方式發生變化。安裝和使用在之后的實踐過程中講解。有一套良好的代碼規范,對于項目的開發和維護都很友好。 努力了,不一定能成功,但是不努力,感覺好舒服啊                   ——努訓 沒有了解過vue1.*,直接上手vue2.0;雖然有些吃力但還是很愉快了學下來了。 一丶環境配置 node.js...

    荊兆峰 評論0 收藏0
  • Sublime Text 配置 Eslint 代碼檢查和自動修復

    摘要:它的目標是提供一個插件化的代碼檢測工具。,有了全局的和當前項目根目錄下的規則配置文件,我們開始裝插件并測試功能吧代碼檢查這個功能需要的插件為和。但是它本身并沒有代碼檢查的功能,需要借助這樣的特定語言檢查支持。 前言 第一次運行 Vue 項目時被瀏覽器中滿屏的 ESLint 報錯給嚇到了,果斷禁用了該功能! 再之后找了個時間認真的了解了一下 ESLint,終于有了一些概念。簡單來說,ES...

    yunhao 評論0 收藏0
  • Web 項目編碼規范化工具

    摘要:項目編碼規范化工具工具代碼校驗工具,讓代碼更一致和避免。在配置文件到項可對單條規則一一進行改寫。以下以項目需校驗文件為例參考鏈接一步一步,統一項目中的編碼規范 Web 項目編碼規范化工具 工具 ESLint The pluggable linting utility for JavaScript and JSX 代碼校驗工具(linting utility),讓代碼更一致和避免 bug...

    meislzhua 評論0 收藏0
  • ESLint大型團隊應用實踐

    摘要:自動化接入和升級方案通過命令行工具提供一鍵接入升級能力,同時集成到團隊腳手架中,大大降低了工程接入和維護的成本。原始代碼經過解析器的解析,在管道中逐一經過所有規則的檢查,最終檢測出所有不符合規范的代碼,并輸出為報告。 引言 代碼規范是軟件開發領域經久不衰的話題,幾乎所有工程師在開發過程中都會遇到,并或多或少會思考過這一問題。隨著前端應用的大型化和復雜化,越來越多的前端工程師和團隊開始重...

    alogy 評論0 收藏0

發表評論

0條評論

劉明

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<