ESLint從入門到實戰

在這里插入圖片描述

引言

作為前端開發者，你是否遇到過這樣的情況：團隊成員寫出的代碼風格各異，有人喜歡用分號，有人不用；有人用雙引號，有人用單引號；代碼評審時總是在糾結這些格式問題而不是業務邏輯？或者在大型項目中，因為一個未定義的變量導致生產環境報錯？

ESLint 就是為了解決這些問題而生的。它不僅能統一代碼風格，更重要的是能在開發階段就發現潛在的錯誤，提高代碼質量和開發效率。

本文將從零開始，帶你全面掌握 ESLint 的使用，從基礎配置到高級定制，從個人項目到團隊協作，讓你成為 ESLint 的專家。

什么是ESLint？

定義與作用

ESLint 是一個開源的 JavaScript 代碼靜態分析工具，由 Nicholas C. Zakas 在 2013 年創建。它的主要作用是：

  1. 代碼質量檢查：識別有問題的模式或不符合特定規則的代碼
  2. 代碼風格統一：強制執行一致的代碼風格
  3. 錯誤預防：在運行前捕獲潛在的錯誤
  4. 最佳實踐提醒：推廣 JavaScript 最佳實踐

核心特性

  • 完全可配置：所有規則都可以開啟/關閉，每個規則都有多個設置選項
  • 插件化架構：可以通過插件擴展功能，支持 TypeScript、React、Vue 等
  • 支持多種配置格式：JSON、YAML、JavaScript 等
  • IDE 集成：主流編輯器都有相應插件
  • 自動修復：大部分格式問題可以自動修復

安裝與基礎配置

安裝ESLint

# 全局安裝（不推薦）
npm install -g eslint# 項目內安裝（推薦）
npm install --save-dev eslint# 使用 yarn
yarn add --dev eslint# 使用 pnpm
pnpm add -D eslint

初始化配置

# 交互式創建配置文件
npx eslint --init# 或者使用
npm init @eslint/config

執行命令后，ESLint 會問你幾個問題：

  1. How would you like to use ESLint?

    • To check syntax only（僅檢查語法）
    • To check syntax and find problems（檢查語法并發現問題）
    • To check syntax, find problems, and enforce code style（檢查語法、發現問題并強制代碼風格）

  2. What type of modules does your project use?

    • JavaScript modules (import/export)
    • CommonJS (require/exports)
    • None of these

  3. Which framework does your project use?

    • React
    • Vue.js
    • None of these

  4. Does your project use TypeScript? Yes/No

  5. Where does your code run?

    • Browser
    • Node

  6. What format do you want your config file to be in?

    • JavaScript
    • YAML
    • JSON

基礎配置文件示例

根據你的選擇，ESLint 會生成對應的配置文件。以 .eslintrc.js 為例：

module.exports = {// 環境定義env: {browser: true,es2021: true,node: true},// 繼承的配置extends: ['eslint:recommended'],// 解析器選項parserOptions: {ecmaVersion: 12,sourceType: 'module'},// 自定義規則rules: {// 在這里添加或覆蓋規則}
};

配置文件詳解

配置文件類型與優先級

ESLint 支持多種配置文件格式，優先級從高到低：

  1. .eslintrc.js
  2. .eslintrc.cjs
  3. .eslintrc.yaml 或 .eslintrc.yml
  4. .eslintrc.json
  5. package.json 中的 eslintConfig 字段

核心配置選項

1. env（環境配置）

定義代碼運行的環境，影響全局變量的可用性：

module.exports = {env: {browser: true,     // 瀏覽器全局變量node: true,        // Node.js 全局變量es2021: true,      // ES2021 語法支持jest: true,        // Jest 測試環境jquery: true,      // jQuery 全局變量worker: true,      // Web Workerserviceworker: true // Service Worker}
};
2. extends（擴展配置）

繼承其他的配置文件或預設規則集：

module.exports = {extends: ['eslint:recommended',           // ESLint 推薦規則'@typescript-eslint/recommended', // TypeScript 推薦規則'plugin:react/recommended',     // React 推薦規則'plugin:vue/essential',         // Vue 基礎規則'airbnb',                      // Airbnb 風格指南'prettier'                     // Prettier 兼容]
};
3. parser（解析器）

指定 ESLint 使用的解析器：

module.exports = {// TypeScript 解析器parser: '@typescript-eslint/parser',// Babel 解析器// parser: '@babel/eslint-parser',parserOptions: {ecmaVersion: 2021,sourceType: 'module',ecmaFeatures: {jsx: true,              // 支持 JSXglobalReturn: true,     // 允許全局 returnimpliedStrict: true     // 啟用嚴格模式}}
};
4. plugins（插件）

擴展 ESLint 功能的插件：

module.exports = {plugins: ['@typescript-eslint',  // TypeScript 插件'react',              // React 插件'react-hooks',        // React Hooks 插件'import',             // import/export 插件'jsx-a11y',           // 無障礙訪問插件'prettier'            // Prettier 插件]
};
5. rules（規則配置）

這是 ESLint 的核心，定義具體的檢查規則：

module.exports = {rules: {// 錯誤級別: "off" 或 0, "warn" 或 1, "error" 或 2// 代碼質量相關'no-unused-vars': 'error',        // 禁止未使用的變量'no-undef': 'error',              // 禁止使用未定義的變量'no-console': 'warn',             // 警告使用 console'no-debugger': 'error',           // 禁止使用 debugger// 代碼風格相關'indent': ['error', 2],           // 強制縮進為 2 個空格'quotes': ['error', 'single'],    // 強制使用單引號'semi': ['error', 'always'],      // 強制使用分號'comma-dangle': ['error', 'never'], // 禁止末尾逗號// ES6+ 相關'prefer-const': 'error',          // 優先使用 const'arrow-spacing': 'error',         // 箭頭函數空格'template-curly-spacing': 'error', // 模板字符串空格// 函數相關'func-style': ['error', 'declaration'], // 函數聲明風格'max-params': ['error', 4],       // 最多 4 個參數// 對象和數組'object-curly-spacing': ['error', 'always'], // 對象花括號空格'array-bracket-spacing': ['error', 'never'], // 數組方括號空格}
};

高級配置選項

1. globals（全局變量）

定義額外的全局變量：

module.exports = {globals: {myCustomGlobal: 'readonly',  // 只讀anotherGlobal: 'writable',   // 可寫$: 'readonly',               // jQuery_: 'readonly'                // Lodash}
};
2. overrides（覆蓋配置）

為特定文件或目錄設置不同的規則：

module.exports = {rules: {// 全局規則'no-console': 'error'},overrides: [{// 對測試文件的特殊配置files: ['**/*.test.js', '**/*.spec.js'],env: {jest: true},rules: {'no-console': 'off'  // 測試文件允許使用 console}},{// 對 TypeScript 文件的配置files: ['**/*.ts', '**/*.tsx'],parser: '@typescript-eslint/parser',plugins: ['@typescript-eslint'],rules: {'@typescript-eslint/no-unused-vars': 'error'}}]
};
3. ignorePatterns（忽略模式）

指定要忽略的文件和目錄：

module.exports = {ignorePatterns: ['dist/','build/','node_modules/','*.min.js','coverage/']
};

常用規則詳解

代碼質量規則

1. 變量相關
{// 禁止使用未聲明的變量'no-undef': 'error',// 禁止未使用的變量'no-unused-vars': ['error', {vars: 'all',           // 檢查所有變量args: 'after-used',    // 檢查使用后的參數ignoreRestSiblings: true // 忽略剩余兄弟元素}],// 禁止重復聲明變量'no-redeclare': 'error',// 禁止在變量定義之前使用'no-use-before-define': ['error', {functions: false,  // 函數聲明提升classes: true,variables: true}]
}
2. 函數相關
{// 要求或禁止使用命名的 function 表達式'func-names': ['error', 'as-needed'],// 強制函數最大行數'max-lines-per-function': ['error', {max: 50,skipBlankLines: true,skipComments: true}],// 限制函數參數數量'max-params': ['error', 4],// 禁止使用 arguments.caller 或 arguments.callee'no-caller': 'error'
}
3. 對象和數組
{// 禁止對象字面量中出現重復的 key'no-dupe-keys': 'error',// 禁止數組中出現重復的元素'no-dupe-args': 'error',// 強制對象字面量屬性名稱使用一致的引號'quote-props': ['error', 'as-needed'],// 要求對象字面量簡寫語法'object-shorthand': ['error', 'always']
}

代碼風格規則

1. 空格和縮進
{// 強制使用一致的縮進'indent': ['error', 2, {SwitchCase: 1,        // switch 語句縮進VariableDeclarator: 1, // 變量聲明縮進outerIIFEBody: 1      // IIFE 縮進}],// 強制在逗號前后使用一致的空格'comma-spacing': ['error', {before: false,after: true}],// 強制在對象字面量的屬性中鍵和值之間使用一致的間距'key-spacing': ['error', {beforeColon: false,afterColon: true}]
}
2. 引號和分號
{// 強制使用一致的引號'quotes': ['error', 'single', {avoidEscape: true,      // 避免轉義allowTemplateLiterals: true // 允許模板字符串}],// 要求或禁止使用分號'semi': ['error', 'always'],// 強制分號之前和之后使用一致的空格'semi-spacing': ['error', {before: false,after: true}]
}

ES6+ 規則

{// 要求使用 const 聲明那些聲明后不再被修改的變量'prefer-const': 'error',// 要求使用箭頭函數作為回調'prefer-arrow-callback': 'error',// 要求使用模板字面量而非字符串連接'prefer-template': 'error',// 強制箭頭函數的箭頭前后使用一致的空格'arrow-spacing': ['error', {before: true,after: true}],// 要求解構賦值'prefer-destructuring': ['error', {array: true,object: true}]
}

實際項目配置示例

React項目配置

module.exports = {env: {browser: true,es2021: true,node: true},extends: ['eslint:recommended','plugin:react/recommended','plugin:react-hooks/recommended','plugin:jsx-a11y/recommended'],parser: '@babel/eslint-parser',parserOptions: {ecmaFeatures: {jsx: true},ecmaVersion: 12,sourceType: 'module',requireConfigFile: false,babelOptions: {presets: ['@babel/preset-react']}},plugins: ['react','react-hooks','jsx-a11y'],rules: {// React 相關'react/prop-types': 'error','react/jsx-uses-react': 'off','react/react-in-jsx-scope': 'off','react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],// React Hooks'react-hooks/rules-of-hooks': 'error','react-hooks/exhaustive-deps': 'warn',// JSX 相關'jsx-quotes': ['error', 'prefer-double'],'react/jsx-indent': ['error', 2],'react/jsx-indent-props': ['error', 2]},settings: {react: {version: 'detect'}}
};

TypeScript項目配置

module.exports = {env: {browser: true,es2021: true,node: true},extends: ['eslint:recommended','@typescript-eslint/recommended','@typescript-eslint/recommended-requiring-type-checking'],parser: '@typescript-eslint/parser',parserOptions: {ecmaVersion: 12,sourceType: 'module',project: './tsconfig.json'},plugins: ['@typescript-eslint'],rules: {// TypeScript 特定規則'@typescript-eslint/no-unused-vars': 'error','@typescript-eslint/no-explicit-any': 'warn','@typescript-eslint/explicit-function-return-type': 'off','@typescript-eslint/explicit-module-boundary-types': 'off','@typescript-eslint/no-non-null-assertion': 'warn',// 類型檢查'@typescript-eslint/strict-boolean-expressions': 'error','@typescript-eslint/prefer-nullish-coalescing': 'error','@typescript-eslint/prefer-optional-chain': 'error',// 命名約定'@typescript-eslint/naming-convention': ['error',{selector: 'interface',format: ['PascalCase'],prefix: ['I']},{selector: 'typeAlias',format: ['PascalCase']},{selector: 'enum',format: ['PascalCase']}]}
};

Node.js項目配置

module.exports = {env: {node: true,es2021: true},extends: ['eslint:recommended'],parserOptions: {ecmaVersion: 12,sourceType: 'module'},rules: {// Node.js 特定規則'no-process-exit': 'error','no-process-env': 'off','global-require': 'error',// 回調函數'callback-return': 'error','handle-callback-err': 'error',// Buffer 相關'no-buffer-constructor': 'error',// 路徑相關'no-path-concat': 'error',// 同步方法'no-sync': 'warn'}
};

命令行使用

基本命令

# 檢查單個文件
npx eslint file.js# 檢查多個文件
npx eslint file1.js file2.js# 檢查目錄
npx eslint src/# 檢查特定擴展名的文件
npx eslint src/ --ext .js,.jsx,.ts,.tsx# 自動修復可修復的問題
npx eslint src/ --fix# 輸出格式化
npx eslint src/ --format table
npx eslint src/ --format json

高級命令選項

# 忽略 .eslintignore 文件
npx eslint src/ --no-ignore# 指定配置文件
npx eslint src/ --config .eslintrc.custom.js# 只運行特定規則
npx eslint src/ --rule 'quotes: error'# 禁用特定規則
npx eslint src/ --rule 'no-console: off'# 緩存結果以提高性能
npx eslint src/ --cache# 指定緩存位置
npx eslint src/ --cache --cache-location .eslintcache# 最大警告數
npx eslint src/ --max-warnings 0

package.json 腳本配置

{"scripts": {"lint": "eslint src/","lint:fix": "eslint src/ --fix","lint:check": "eslint src/ --max-warnings 0","lint:cache": "eslint src/ --cache","precommit": "lint-staged"},"lint-staged": {"*.{js,jsx,ts,tsx}": ["eslint --fix","git add"]}
}

IDE集成

VS Code集成

  1. 安裝ESLint插件

    • 在擴展商店搜索 “ESLint”
    • 安裝官方的 ESLint 插件

  2. 配置settings.json

{"eslint.enable": true,"eslint.autoFixOnSave": true,"eslint.validate": ["javascript","javascriptreact","typescript","typescriptreact"],"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"eslint.workingDirectories": ["./src"]
}

WebStorm/IDEA集成

  1. 打開 Settings/Preferences
  2. 導航到 Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
  3. 勾選 “Automatic ESLint configuration”
  4. 配置 “Run eslint --fix on save”

與其他工具集成

與Prettier集成

# 安裝相關包
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier# .eslintrc.js 配置
module.exports = {extends: ['eslint:recommended','prettier'  // 必須放在最后],plugins: ['prettier'],rules: {'prettier/prettier': 'error'}
};# .prettierrc 配置
{"semi": true,"trailingComma": "es5","singleQuote": true,"printWidth": 80,"tabWidth": 2
}

與Husky和lint-staged集成

# 安裝
npm install --save-dev husky lint-staged# package.json 配置
{"husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"*.{js,jsx,ts,tsx}": ["eslint --fix","prettier --write","git add"]}
}

與Webpack集成

// webpack.config.js
const ESLintPlugin = require('eslint-webpack-plugin');module.exports = {plugins: [new ESLintPlugin({extensions: ['js', 'jsx', 'ts', 'tsx'],fix: true,cache: true})]
};

自定義規則開發

創建簡單的自定義規則

// rules/no-console-log.js
module.exports = {meta: {type: 'suggestion',docs: {description: 'Disallow console.log statements',category: 'Best Practices',recommended: false},fixable: 'code',schema: []},create(context) {return {CallExpression(node) {if (node.callee.type === 'MemberExpression' &&node.callee.object.name === 'console' &&node.callee.property.name === 'log') {context.report({node,message: 'console.log is not allowed',fix(fixer) {return fixer.remove(node.parent);}});}}};}
};

使用自定義規則

// .eslintrc.js
module.exports = {rules: {'local/no-console-log': 'error'},plugins: ['local']
};// eslint-plugin-local/index.js
module.exports = {rules: {'no-console-log': require('./rules/no-console-log')}
};

性能優化

緩存配置

# 啟用緩存
npx eslint src/ --cache# 指定緩存文件位置
npx eslint src/ --cache --cache-location node_modules/.cache/eslint

并行處理

{"scripts": {"lint:parallel": "eslint src/ --cache --fix --max-warnings 0"}
}

忽略文件配置

# .eslintignore
node_modules/
dist/
build/
coverage/
*.min.js
*.bundle.js
public/

團隊協作最佳實踐

1. 統一配置管理

// eslint-config-company/index.js
module.exports = {extends: ['eslint:recommended','@typescript-eslint/recommended'],rules: {// 公司統一規則'indent': ['error', 2],'quotes': ['error', 'single'],'semi': ['error', 'always']}
};// 項目中使用
// .eslintrc.js
module.exports = {extends: ['@company/eslint-config']
};

2. 漸進式引入

// 第一階段：只啟用錯誤級別規則
module.exports = {extends: ['eslint:recommended'],rules: {// 只修復明顯錯誤'no-unused-vars': 'error','no-undef': 'error'}
};// 第二階段：添加警告級別規則
module.exports = {extends: ['eslint:recommended'],rules: {'no-unused-vars': 'error','no-undef': 'error','no-console': 'warn',  // 新增警告'prefer-const': 'warn'}
};// 第三階段：提升為錯誤級別
module.exports = {extends: ['eslint:recommended'],rules: {'no-unused-vars': 'error','no-undef': 'error','no-console': 'error',    // 提升為錯誤'prefer-const': 'error'}
};

3. CI/CD 集成

# .github/workflows/lint.yml
name: Lint
on: [push, pull_request]jobs:lint:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v2- uses: actions/setup-node@v2with:node-version: '16'- run: npm ci- run: npm run lint:check

常見問題與解決方案

1. 解析錯誤

問題：Parsing error: Unexpected token
解決：檢查解析器配置，確保支持使用的語法特性

module.exports = {parser: '@babel/eslint-parser',parserOptions: {ecmaVersion: 2021,sourceType: 'module',requireConfigFile: false}
};

2. 規則沖突

問題：ESLint 和 Prettier 規則沖突
解決：使用 eslint-config-prettier

module.exports = {extends: ['eslint:recommended','prettier'  // 必須放在最后，覆蓋沖突規則]
};

3. 性能問題

問題：ESLint 運行很慢
解決：

  • 啟用緩存：--cache
  • 使用 .eslintignore 忽略不必要的文件
  • 考慮使用 eslint_d
# 安裝 eslint_d（ESLint 守護進程）
npm install -g eslint_d# 使用 eslint_d 替代 eslint
eslint_d src/

4. 內存溢出

問題：JavaScript heap out of memory
解決：增加 Node.js 內存限制

{"scripts": {"lint": "node --max-old-space-size=4096 node_modules/.bin/eslint src/"}
}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/88187.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/88187.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/88187.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

vue3實現markdown文檔轉HTML并可更換樣式

vue3實現markdown文檔轉HTML并可更換樣式

vue3實現markdown文檔轉HTML 安裝marked npm install marked<template><!-- 后臺可添加樣式編輯器 --><div class"markdown-editor" :class"{ fullscreen: isFullscreen, preview-mode: isPreviewMode }"><div class"editor-c…
閱讀更多...
Temu 實時獲取商品動態：一個踩坑后修好的抓數腳本筆記

Temu 實時獲取商品動態：一個踩坑后修好的抓數腳本筆記

Temu 作為一個增長迅猛的購物平臺&#xff0c;其商品價格、庫存等信息&#xff0c;對許多做運營分析的小伙伴來說非常有參考價值。 我在寫這個小工具的時候&#xff0c;踩了很多坑&#xff0c;特別記錄下來&#xff0c;希望對你有用。 初版代碼&#xff1a;想當然的“直接來一下…
閱讀更多...
【軟考高級系統架構論文】論數據分片技術及其應用

【軟考高級系統架構論文】論數據分片技術及其應用

論文真題 數據分片就是按照一定的規則，將數據集劃分成相互獨立、 正交的數據子集，然后將數據子集分布到不同的節點上。通過設計合理的數據分片規則，可將系統中的數據分布在不同的物理數據庫中，達到提升應用系統數據處理速度的目的。 請圍繞“論數據分片技術及其應用”論題…
閱讀更多...
VR飛奪瀘定橋沉浸式歷史再現?

VR飛奪瀘定橋沉浸式歷史再現?

當你戴上 VR 設備開啟這場震撼人心的 VR 飛奪瀘定橋體驗&#xff0c;瞬間就會被拉回到 1935 年那個戰火紛飛的 VR 飛奪瀘定橋的歲月&#xff0c;置身于瀘定橋的西岸 。映入眼簾的是一座由 13 根鐵索組成的瀘定橋&#xff0c;它橫跨在波濤洶涌的大渡河上&#xff0c;橋下江水咆哮…
閱讀更多...
libwebsockets編譯

libwebsockets編譯

#安裝 libwebsocket git clone https://github.com/warmcat/libwebsockets && \ mkdir libwebsockets/build && cd libwebsockets/build && \ cmake -DMAKE_INSTALL_PREFIX:PATH/usr -DCMAKE_C_FLAGS"-fpic" .. && \ make &&…
閱讀更多...
使用docker部署epg節目單，同時管理自己的直播源

使用docker部署epg節目單，同時管理自己的直播源

配置 Docker 環境 拉取鏡像并運行&#xff1a; docker run -d \--name php-epg \-v /etc/epg:/htdocs/data \-p 5678:80 \--restart unless-stopped \taksss/php-epg:latest 默認數據目錄為 /etc/epg &#xff0c;根據需要自行修改 默認端口為 5678 &#xff0c;根據需要自行修…
閱讀更多...
H5新增屬性

H5新增屬性

? 一、表單相關新增屬性&#xff08;Form Attributes&#xff09; 這些屬性增強了表單功能&#xff0c;提升用戶體驗和前端驗證能力。 1. placeholder 描述&#xff1a;在輸入框為空時顯示提示文本。示例&#xff1a; <input type"text" placeholder"請輸…
閱讀更多...
【C++】簡單學——引用

【C++】簡單學——引用

引用的概念 為一個變量指定一個別名 引用的規則 用之前要初始化使用了之后就不能修改指向了&#xff08;對一個引用賦值實際上是對原本被引用的那個值進行賦值&#xff0c;而不是改變指向&#xff09;一個對象可以同時有多個引用 問&#xff1a;引用可以完全代替指針嗎&…
閱讀更多...
C#編程與1200PLC S7通信

C#編程與1200PLC S7通信

讀取q0.0的狀態,i0.0的狀態實時在窗口更新 PLC里寫一個程序 用常閉按鈕接i0.0信號 &#xff0c;延時接通Q0.0 按按鈕&#xff0c;上位機測試效果, 2396fcfa823aa951d 程序前提是引用了S7通信文件 using Sharp7; using System; using System.Collections.Generic; using S…
閱讀更多...
el-table復選框分頁多選

el-table復選框分頁多選

場景&#xff1a; 你想要對el-table表格數據進行批量處理&#xff0c;會使用復選框&#xff0c;但如果表格的數據是分頁請求回來的&#xff0c;則在切換頁碼的時候&#xff0c;之前選中的數據會被清空掉&#xff0c;本文就是為了解決這個問題。 解決思路&#xff1a; 主要分…
閱讀更多...
大IPD之——學習華為的市場隊伍建設（二十）

大IPD之——學習華為的市場隊伍建設（二十）

企業要生存&#xff0c;就必須要擁有自己的核心競爭力。這樣在行業內與其他企業競爭時&#xff0c;才能立于不敗之地&#xff0c;而伴隨著企業的市場化&#xff0c;市場機制對企業價值創造的影響力越來越大。30多年來&#xff0c;華為高度重視市場隊伍與市場能力建設&#xff0…
閱讀更多...
Datawhlale_快樂學習大模型_task02_NLP 基礎概念

Datawhlale_快樂學習大模型_task02_NLP 基礎概念

書籍地址 簡要總結一下個人理解 文章目錄 1.1 NLP1.2 發展歷程1.3 NLP任務1.3.1 中文分詞1.3.2 子詞切分1.3.3 詞性標注1.3.4 文本分類1.3.5 實體識別1.3.6 關系抽取1.3.7 文本摘要1.3.8 機器翻譯1.3.9 自動問答 1.4 文本表示的發展1.4.1 詞向量1.4.2 語言模型1.4.3 Word2Vec…
閱讀更多...
AUTOSAR圖解==＞AUTOSAR_AP_SWS_Persistency

AUTOSAR圖解==＞AUTOSAR_AP_SWS_Persistency

AUTOSAR 持久化功能集群解析 1. 引言 AUTOSAR (AUTomotive Open System ARchitecture) 適配平臺中的持久化功能集群(Persistency Functional Cluster)是一個核心組件&#xff0c;為應用程序提供數據持久化服務。本文檔詳細分析了AUTOSAR持久化功能集群的架構、主要組件和工作…
閱讀更多...
Ollama常用命令詳解：本地大語言模型管理指南

Ollama常用命令詳解：本地大語言模型管理指南

前言 Ollama是一個強大的本地大語言模型管理工具&#xff0c;讓我們可以輕松地在本地部署和運行各種開源大模型。本文將詳細介紹Ollama的核心命令使用方法&#xff0c;幫助您快速上手本地AI模型的管理和使用。 1. 查看已安裝模型 - ollama list 基本用法 ollama list功能說…
閱讀更多...
[免費]SpringBoot+Vue共享單車信息系統【論文+源碼+SQL腳本】

[免費]SpringBoot+Vue共享單車信息系統【論文+源碼+SQL腳本】

大家好&#xff0c;我是java1234_小鋒老師&#xff0c;看到一個不錯的SpringBootVue共享單車信息系統【論文源碼SQL腳本】&#xff0c;分享下哈。 項目視頻演示 【免費】SpringBootVue共享單車信息系統 Java畢業設計_嗶哩嗶哩_bilibili 項目介紹 快速發展的社會中&#xff…
閱讀更多...
內網提權-DC-3靶場實驗(Ubantu16.04)

內網提權-DC-3靶場實驗(Ubantu16.04)

靶場地址 https://download.vulnhub.com/dc/DC-3-2.zip 打開DC-3 使用kali掃描獲取靶場ip 目錄掃描獲取后臺地址 弱口令admin/snoopy進入后臺 此處可寫入一句話木馬 創建文件寫入一句話木馬 哥斯拉上線 使用lsb_release -a命令查看內核版本 方法一 使用ubuntu漏洞庫發現該…
閱讀更多...
Nginx：互斥鎖 accept_mutex配置

Nginx：互斥鎖 accept_mutex配置

如何配置 Nginx 的互斥鎖 accept_mutex 1. 理解 accept_mutex 的作用 accept_mutex 是 Nginx 用于控制多工作進程&#xff08;worker processes&#xff09;接收新連接時避免「驚群問題&#xff08;Thundering Herd&#xff09;」的機制。 啟用時&#xff08;accept_mutex o…
閱讀更多...
aws(學習筆記第四十六課) codepipeline-build-deploy

aws(學習筆記第四十六課) codepipeline-build-deploy

文章目錄 aws(學習筆記第四十六課) codepipeline-build-deploy學習內容：1. 代碼鏈接及整體架構1.1 代碼鏈接1.2 整體架構1.2.1 初始化階段的`codecommit repo`以及`codebuild project`設定1.2.2 創建`vpc`，`public alb`，`alb listener`以及`fargate service`等1.2.3 創建`so…
閱讀更多...
Vue 項目中的組件職責劃分評審與組件設計規范制定

Vue 項目中的組件職責劃分評審與組件設計規范制定

在現代前端系統中&#xff0c;Vue&#xff08;無論是 2.x 還是 3.x&#xff09;提供了良好的組件化機制&#xff0c;為構建復雜交互系統打下了基礎。然而&#xff0c;隨著項目規模增長&#xff0c;組件職責不清、代碼重疊、維護困難等問題頻發&#xff0c;嚴重影響開發效率與可…
閱讀更多...
react 的過渡動畫

react 的過渡動畫

一、React的過渡動畫 1、react-transition-group 在開發中&#xff0c;我們想要給一個組件的顯示和消失&#xff0c;添加某種過渡動畫&#xff0c;可以很好的增加用戶體驗&#xff0c; React社區為我們提供了react-transition-group用來完成過渡動畫&#xff0c; React曾為…
閱讀更多...
最新文章

Copyright @ 2022~2023