小程式、前端交流群：609690978
寫在前面： 本教程為有一定代碼規范的開發者提供，如果您是新手，建議嚴格按照規范矯正自己的代碼風格，盡量在沒有ESLint的情況下也能寫出漂亮規范的代碼
您是否還在為ESLint的語法校驗規則而頭疼？
您是否還飽受ESLint的語法規則的折磨？
您是否還在手動修改ESLint的錯誤？
別著急，這篇文章將徹底讓你告別ESLint所帶來的各種困擾，（視頻以Vue-js錄制，適用于anglar中的ts）
先上效果：
<iframe id="8yaPWkgn-1610705813449" src="https://v.qq.com/txp/iframe/player.html?vid=s3221j1vqk4" allowfullscreen="true" data-mediaembed="tencent"></iframe>
自動校驗ESLint
準備作業：
-
VSCode
-
ESLint插件
-
Prettier插件
-
安裝ESLint、Prettier(其實可以忽略掉)
npm install eslint --save-dev
npm install --save-dev --save-exact prettier
5.在專案根目錄創建.eslint.json、.prettier.json檔案或.eslintre.js、.prettierrc.js檔案
.prettierrc.js寫入校驗規則，具體自行百度
module.exports = {
printWidth: 200,
tabWidth: 2,
useTabs: false,
semi: false, //
singleQuote: true, //
quoteProps: 'as-needed',
trailingComma: 'none', // for better git history
bracketSpacing: true,
arrowParens: 'avoid', // avoid (default): Omit parens when possible. Example: x => x
htmlWhitespaceSensitivity: 'ignore', // for better format
endOfLine: 'lf', // windows users: git config core.autocrlf false --global
// eslintIntegration: 'true',
}
.eslintrc.js寫入配置,具體自行百度
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
parserOptions: {
parser: 'babel-eslint',
},
extends: [
'@nuxtjs',
'prettier',
'prettier/vue',
'plugin:prettier/recommended',
'plugin:nuxt/recommended',
],
plugins: ['prettier'],
rules: {
'camelcase': 'off',
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
globals: {
WxLogin: true,
},
}
- 修改vscode的用戶設定檔案，setting.json
{
"editor.defaultFormatter": "SimonSiefke.prettier-vscode",
// 縮進字符 2
"editor.tabSize": 2,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"java.semanticHighlighting.enabled": true,
"window.zoomLevel": 0,
// #去掉代碼結尾的分號
"prettier.semi": true,
// 讓prettier使用eslint的代碼格式進行校驗
"prettier.eslintIntegration": true,
// 使用單引號替代雙引號
"prettier.singleQuote": true,
// 函式名和后面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// 每次保存自動格式化
"editor.formatOnSave": true,
// eslint格式化字串
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
// "eslint.autoFixOnSave": false,
"source.fixAll.tslint": false
},
"eslint.codeAction.disableRuleComment": {},
"editor.fontLigatures": false,
"explorer.confirmDelete": false,
"java.configuration.checkProjectSettingsExclusions": false,
// tslint配置
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"javascript.updateImportsOnFileMove.enabled": "always",
"editor.rulers": [
]
}
最后一步，非常重要！！！
很多開發配置完上述內容后發現并沒有生效，或者沒有完全生效，這里要注意，vscode右下角有兩個按鈕，注意其狀態，一定要鉤上
至此，當我們保存后，代碼就會自動根據ESLint的校驗規則進行自動修復，再也不需要手動修改了，效率大大提升～～～～
小程式、前端交流群：609690978
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/249806.html
標籤：區塊鏈
下一篇：vue實戰