[TOC]
### 1. 安裝插件(保存時使用eslint進行代碼檢查)
~~~
"@vue/cli-plugin-eslint": "^3.0.3",
"@vue/eslint-config-airbnb": "^3.0.3",
~~~
### 2. 創建.eslintrc.js文件
~~~
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', '@vue/airbnb'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 在這里自定義修改
'linebreak-style': 0,
semi: [2, 'never'], // 不加分號
'no-unused-expressions': [2, {
allowShortCircuit: true,
allowTernary: true
}], // 允許三元
'no-plusplus': 0, // 開啟i++
'comma-dangle': [2, 'never'], // 結尾不使用逗號
'import/no-unresolved': [2, {
ignore: ['esri', 'dojo']
}], // 解決import esri/xxx編譯不通過
'import/extensions': 0,
// 'no-console': 0,
'arrow-parens': [2, 'as-needed'], // 箭頭函數參數只有一個時無需加括號
'no-param-reassign': [2, {
props: false
}],
'no-mixed-operators': 0,
// 'max-len': [2, {"code": 120} ],
'vue/no-parsing-error': [2, {
'x-invalid-end-tag': false
}]
},
parserOptions: {
parser: 'babel-eslint'
}
}
~~~
### 3. 創建[prettier配置]([https://segmentfault.com/a/1190000014613058](https://segmentfault.com/a/1190000014613058))(自動解決eslint中發現的問題)
1. 安裝插件
~~~
"prettier": "^1.15.3",
安裝:yarn add prettier --dev --exact
~~~
2. 配置prettier.config.js
~~~
/* prettier配置項 */
module.exports = {
"printWidth": 100, //一行的字符數,如果超過會進行換行,默認為80
"tabWidth": 2, //一個tab代表幾個空格數,默認為80
"useTabs": false, //是否使用tab進行縮進,默認為false,表示用空格進行縮減
"singleQuote": true, //字符串是否使用單引號,默認為false,使用雙引號
"semi": false, //行位是否使用分號,默認為true
"trailingComma": "none", //是否使用尾逗號,有三個可選值"<none|es5|all>"
"bracketSpacing": true, //對象大括號直接是否有空格,默認為true,效果:{ foo: bar }
};
~~~
### 4、husky,lint-staged(使用git進行commit時格式化代碼),prettier配合使用
[鏈接]([https://www.jianshu.com/p/cdd749c624d9](https://www.jianshu.com/p/cdd749c624d9))
#### 使用 husky 的具體做法如下:
首先,安裝依賴:
~~~
npm install -D husky
yarn add --dev husky
~~~
然后修改 package.json,增加配置:
~~~
{
"scripts": {
"precommit": "eslint src/**/*.js"
}
}
~~~
最后嘗試 Git 提交,你就會很快收到反饋:
~~~
git commit -m "Keep calm and commit"
~~~
#### lint-staged 用法如下:
首先,安裝依賴:
~~~
npm install -D lint-staged
yarn add --dev lint-staged
~~~
然后,修改 package.json 配置:
~~~
{
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"src/**/*.js": "eslint"
}
}
~~~
最后,嘗試提交的效果:
實際上,lint-staged 給了你提交前代碼操作的更大自由度,比如使用下面的配置,自動修復錯誤:
~~~
{
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"src/**/*.js": ["eslint --fix", "git add"]
}
}
~~~
或者使用下面的配置,自動格式化代碼(謹慎使用):
~~~
{
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"src/**/*.js": ["prettier --write", "git add"]
}
}
~~~
~~~
項目:
"lint-staged": {
"src/**/*.{vue,js}": [
"yarn lint",
"git add"
],
"src/**/*.{json,md,css,scss}": [
"prettier --write",
"git add"
]
},
~~~
- Introduction
- 1.配置sublime
- 1.1sublime配置sass
- 1.2sublime配置less
- 2.webstrom配置sass
- 3.vscode前端開發環境配置
- 4.git補充教程
- sass安裝環境的配置:
- 部署網站(域名解析到服務器)
- 字體壓縮
- jshint(js錯誤提示)
- 格式轉換器
- sourceTree
- 配置接口
- Java環境變量
- 激活
- 大白菜裝機
- 真機調試
- 彩色字
- docsify配置和使用
- vscode插件安裝
- git分支管理
- 更換遠程倉庫地址
- fork項目
- 獲取全部分支
- git 開發管理
- git 代碼提示
- git 常用操作
- 預提交問題
- vpn
- 禪道
- 藍湖
- px to rem 插件
- 插件同步
- 項目代碼格式校驗
- 在全局配置的文件可以直接使用process.env訪問到
- 快捷鍵設置
- 安裝node-sass
- 使用yarn commit 提交代碼
- vscode 開啟大小寫敏感
- vscode插件換位置
- 清除vscode
- vscode 配置
- 全局安裝的插件無法使用,說的是什么禁止運行腳本??
- mac配置ssh
- git 配置郵箱/用戶名
- 終端查找文件
- vscode外觀設置
- 大數據學習路線
- mac
- 裝nvm,node包管理工具