快捷導(dǎo)航

eslint+prettier統(tǒng)一代碼風(fēng)格的實(shí)現(xiàn)方法

更新時(shí)間：2020年07月22日 09:00:03 作者：羅漢爺

這篇文章主要介紹了eslint+prettier 統(tǒng)一代碼風(fēng)格的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.實(shí)現(xiàn)效果

Eslint校驗(yàn)代碼語法，prettier統(tǒng)一格式化代碼，按下保存自動(dòng)修復(fù)eslint錯(cuò)誤，自動(dòng)格式化代碼。

2.安裝vscode插件

Vetur
ESLint
Prettier - Code formatter

3.配置vscode設(shè)置

文件–首選項(xiàng)–設(shè)置，打開json模式，添加以下配置：

{
 // 控制工作臺(tái)中活動(dòng)欄的可見性。
 "workbench.activityBar.visible": true,
 //主題設(shè)置
 "workbench.colorTheme": "Monokai",
 // 默認(rèn)編輯器字號(hào)
 "editor.fontSize": 14,
 //是否自動(dòng)換行
 "editor.wordWrap": "on",
 "workbench.editor.enablePreview": false, //打開文件不覆蓋
 "search.followSymlinks": false, //關(guān)閉rg.exe進(jìn)程
 "editor.minimap.enabled": false, //關(guān)閉迷你圖快速預(yù)覽
 "files.autoSave": "onWindowChange", // 切換窗口時(shí)自動(dòng)保存。
 "editor.lineNumbers": "on", //開啟行數(shù)提示
 "editor.quickSuggestions": {
 //開啟自動(dòng)顯示建議
 "other": true,
 "comments": true,
 "strings": true
 },
 "editor.tabSize": 2, //制表符符號(hào)eslint

 //.vue文件template格式化支持，并使用js-beautify-html插件
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 //js-beautify-html格式化配置，屬性強(qiáng)制換行
 "vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
 "wrap_attributes": "force-aligned"
 }
 },
 //根據(jù)文件后綴名定義vue文件類型
 "files.associations": {
 "*.vue": "vue"
 },
 //配置 ESLint 檢查的文件類型
 "eslint.validate": [
 "javascript",
 "javascriptreact",
 {
 "language": "vue",
 "autoFix": true
 }
 ],
 //保存時(shí)eslint自動(dòng)修復(fù)錯(cuò)誤
 "eslint.autoFixOnSave": true,
 //保存自動(dòng)格式化
 "editor.formatOnSave": true
}

4.配置.eslintrc.js

module.exports = {
 root: true,
 env: {
 node: true
 },
 extends: ['plugin:vue/essential', 'eslint:recommended'],
 rules: {
 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 //強(qiáng)制使用單引號(hào)
 quotes: ['error', 'single'],
 //強(qiáng)制不使用分號(hào)結(jié)尾
 semi: ['error', 'never']
 },
 parserOptions: {
 parser: 'babel-eslint'
 }
}

5.配置.prettierrc

{
 "eslintIntegration": true, 
 "singleQuote": true,
 "semi": false
}

到此這篇關(guān)于eslint+prettier 統(tǒng)一代碼風(fēng)格的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)eslint prettier 統(tǒng)一代碼風(fēng)格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: